现在的位置: 首页 > 综合 > 正文

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

2013年10月17日 ⁄ 综合 ⁄ 共 2292字 ⁄ 字号 评论关闭

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

 

抱歉!评论已关闭.