jquery实现checkbox全选,反选,取消选择
开门见山,直接介绍方法,假设页面html代码如下
|
<a
href=”javascript:;” id=”all”>全部选择</a><br><a href=”javascript:;” id=”delAll”>取消选择</a><br> <a href=”javascript:;” <p><input <input type=”checkbox”
name=”checkbox1″> B
<input <input type=”checkbox” <input type=”checkbox”
name=”checkbox1″>F</p>
|
全部选择代码:
| Jquery部分
//全部选择$(”#all”).click(function(){
$(”input[name='checkbox1']“).each(function(){ $(this).attr(”checked”,true); }); });
普通javascirpt部分: function checkAll(){for(i=0;i<newTask.length;i++){
e=newTask.elements[i]; if(e.type==’checkbox’){ if(e.checked=false){ e.checked=true; }else{ e.checked=true; } } } }
|
取消选择代码:
| Jquery部分:
//取消选择$(”#delAll”).click(function(){
$(”input[name='checkbox1']“).each(function(){ $(this).attr(”checked”,false); }); });
普通javascript部分: function delAll(){for(i=0;i<newTask.length;i++){
e=newTask.elements[i]; if(e.type==’checkbox’){ if(e.checked=true){ e.checked=false; } else{ e.checked=false; } } }
}
|
反向选择代码:
| Jquery部分:
//反向选择$(”#antiAll”).click(function(){
$(”input[name='checkbox1']“).each(function(){ $(this).attr(”checked”,!this.checked); });
普通javascript部分: function
antiAll(){for(i=0;i<newTask.length;i++){ e=newTask.elements[i]; if(e.type==’checkbox’){ e.checked=!e.checked; } }
}
|
ps:在使用jquery时,一定要把jquery.js的加载放到所有与jquery有关的js文件之前,否则可能导致无法加载其他js文件,而造成错误。
测试
[回复]