首页 > jquery及javascript学习 > jquery实现checkbox全选,反选,取消选择

jquery实现checkbox全选,反选,取消选择

2009年6月17日

开门见山,直接介绍方法,假设页面html代码如下

 

 

<a
href=”javascript:;”
id=”all”>全部选择</a><br><a href=”javascript:;”
id=”delAll”>取消选择</a><br>

<a href=”javascript:;”
id=”antiAll”>反向选择</a>

<p><input
type=”checkbox” name=”checkbox1″>A

<input type=”checkbox”
name=”checkbox1″>

B

 

 

 

 

 

 

 

<input
type=”checkbox”
name=”checkbox1″>C</p><p><input
type=”checkbox” name=”checkbox1″>D

<input type=”checkbox”
name=”checkbox1″>E

<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文件,而造成错误。

sunshineyxp jquery及javascript学习

  1. sunshineyxp
    2009年7月8日16:02 | #1

    测试

    [回复]

  1. 目前还没有任何 trackbacks 和 pingbacks.