Question

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

Answer 1

   

<input type="checkbox" name="checkAll" class="selectAll" onclick="chkChange();" />   

<input type="checkbox" class="cb_box " name="chdel"/>  

//全选||全不选

        function chkChange() {

            if ($(".selectAll").attr("checked")) {

                $(".cb_box").each(function () {

                    $(this).attr("checked", true);

                });

            } else {

                $(".cb_box").each(function () {

                    $(this).attr("checked", false);

                });

            }

        }

Answer 2

首先要导入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>