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);  //弹出你选择的项

});

 

转载于:https://www.cnblogs.com/itdream/archive/2012/05/31/2528428.html