如何用jquery实现checkbox点选一个选中其他，取消一个取消其他

最新推荐文章于 2022-06-14 10:25:09 发布

原创最新推荐文章于 2022-06-14 10:25:09 发布 · 1w 阅读

1 ·

CC 4.0 BY-SA版权

javascript 同时被 2 个专栏收录

16 篇文章

订阅专栏

开发

7 篇文章

订阅专栏

使用jQuery实现点击一个特定checkbox实现全选或全不选的效果。遇到的问题包括：jQuery库导入路径错误、选中操作的语法细节、checked属性的理解与应用。通过不断调试，最终找到解决方案，即通过修改checked属性来控制其他checkbox的状态。

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

用jquery实现，选中一个特定的checkbox，则其他checkbox都选中，不选中这个特定的checkbox，则其他checkbox也不选中

首先要导入jquery.js

这是我碰到了 jquery没有反应，网页提示找不到对象，网上找了，这个很可能是导入的jquery路径写错！

还有就是选中checkbox应该是$(:checkbox)一定注意加冒号！

最开始我想看一下==可不可以用

<script type="text/javascript">
$(document).ready(function(){
	$("#selectAll").click(function(){   
		alert($(this).attr("value")==true);
});

但是发现不管怎么输出都是false，之后改成了

<script type="text/javascript">
$(document).ready(function(){
	$("#selectAll").click(function(){   
		alert($(this).attr("value")==“true”);
});

true加上引号才对！

<script type="text/javascript">
$(document).ready(function(){
	$("#selectAll").click(function(){   
		if($(this).attr("value")=="true"){
			$(":checkbox").attr("value","true");}
		}); 
</script>

发现$(#selectAll)不管怎么选，其他checkbox依旧没选中
原来value这个属性透过是否选中传的值（选中传true)，并不是决定对勾的属性

之后改成了

$(":checkbox").attr("checked","checked");

可以选中了，但是$(#selectAll)却不能取消选中了。。。

继续修改

<script type="text/javascript">
$(document).ready(function(){
	$("#selectAll").click(function(){   
		if($(this).attr("value")=="true"){
			$(":checkbox")..not($(this)).attr("checked","checked");		}); 
</script>

这样写就可以了，原来使其他checkbox选中要先去掉这个特定的checkbox，否则他就不能取消选中了。

然后我就该做第二个效果，取消特定的checkbox，则取消所有选中，没考虑就加了

 else{
			$(":checkbox")..not($(this)).attr("checked","unchecked");		}

但是并没有取消其他checkbox选中，难道checked属性有其他值？

我就做了一个输出没有选中的checked属性值的javascript

alert($(this).attr("checked"));发现输出的是undefined

然后改成

else{
			$(":checkbox")..not($(this)).attr("checked","undefined");		}

还是不行。。。

最后我查看jquery改用了

 else{
			 $(":checkbox").not($(this)).removeAttr("checked");
		}

成功了！！

原来是要去掉checked这个属性才能不让他选中！
最后贴一下代码吧

<script src="jquery/jquery-1.8.3.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
	$("#selectAll").click(function(){   
		if($(this).attr("checked")=="checked"){
			$(":checkbox").not($(this)).attr("checked","checked");}
		 else{
			 $(":checkbox").not($(this)).removeAttr("checked");
		}  
		});
	}); 
</script>
<th><s:checkbox name="selectAll" id="selectAll" fieldValue="false"></s:checkbox></th><th>部门名称</th><th>部门负责人</th><th>部门职能 </th><th>备注</th>
</tr>

<s:iterator value="#departmentList">
<td><s:checkbox name="selects" id="selects"></s:checkbox></td>
<s:hidden name="ids" value="%{id}"></s:hidden>
  <td><s:a action="departmentAction_editUI?id=%{id}"><s:property value="name"/></s:a></td>
 <td><s:property value="managerUserName"/></td>
 <td><s:property value="function"/></td>
  <td><s:property value="comment"/></td>
</s:iterator>