用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>