input checkbox js控制单选

最新推荐文章于 2025-06-07 22:15:50 发布

原创最新推荐文章于 2025-06-07 22:15:50 发布 · 3.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#checkbox #JavaScript

Web 同时被 2 个专栏收录

9 篇文章

订阅专栏

JavaScript

3 篇文章

订阅专栏

本文介绍如何在HTML中使用JavaScript实现复选框（checkbox）的单选功能。通过示例代码展示了在同一div内限制多个checkbox只能选中一个的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html中checkbox的格式如下：


<div id='jfxz'>
    <div><input type="checkbox" /><span>1</span></div>
    <div><input type="checkbox" /><span>2</span></div>
    <div><input type="checkbox" /><span>3</span></div>
    <div><input type="checkbox" /><span>4</span></div>
    <div><input type="checkbox" /><span>5</span></div>
    <div><input type="checkbox" /><span>6</span></div>
</div>

function checkboxControl(){
	//$(function(){
		$("#jfxz").find(":checkbox").each(function(){
		$(this).click(function(){
			$(this).attr('checked',true);//被选中的置为true
			$("#jfxz").find(":checkbox").not($(this)).each(function(){//被选中的之外的元素，遍历置为false
				$(this).attr('checked',false);
			});
		});
		});
		//});
		
}

若checkbox仅为同一div下的多个同济checkbox，则可用：

 $(":checkbox").click(function(){
//设置当前选中checkbox的状态为checked
    $(this).attr("checked",true);
    $(this).siblings().attr("checked",false); //设置当前选中的checkbox同级(兄弟级)其他checkbox状态为未选中
});