Jquery对复选框的操作

可以访问 这里 查看更多关于大数据平台建设的原创文章。

<from>

你的爱好是?<br/>

 <input type="checkbox" name="items" value="篮球" />篮球

 <input type="checkbox" name="items" value="乒乓球" />乒乓球

 <input type="checkbox" name="items" value="羽毛球" />羽毛球

 <input type="checkbox" name="items" value="足球" />足球

<input type="button" id="checkall" value="全选"/>

<input type="button" id="checkno" value="全不选"/>

<input type="button" id="checkrev" value="反选"/>

<input type="button" id="send" value="提交"/>

</from>

若是复选框处于选中或者不选中的状态,必须通过控制元素的 checked属相来达到目的.

1:全选

$("#checkall").click(function(){

 $('[name=items]:checkbox').attr('checked',true);

})

2:全不选

$("#checkall").click(function(){

 $('[name=items]:checkbox').attr('checked',false);

});

3:反选

$("#checkall").click(function(){

 $('[name=items]:checkbox').attr('checked',!$(this).attr('checked'));  //原来是false,则现在为true;原来是true,则现在为false; 这里取了一个非(!) 操作

});

4:用户点击提交后把选中的值全部输出:

$("#send").click(function(){

  var str="你选中的是:\r\n";   //  \r\n 是换行

 $('[name=items]:checkbox:checked').each(function(){  //对所有选中项进行遍历

  str +=$(this).val()+"\r\n";

})

alert(str);  //弹出你选择的项

});

更多文章

欢迎访问 webpack 系列原创文章:

关注微信公众号

欢迎大家关注我的微信公众号阅读 更多 原创文章:

just think and do it
原文地址:https://www.cnblogs.com/itdream/p/2528428.html