jquery实现全选和反选功能

jQuery操作复选框的选中和不选中状态非常简单，使用attr()来设置"checked"属性的值，true未选中，false为未选中，在整个全选、反选过程中注意处理全选复选框的选中状态，以及获取选中选项的值。

<ul id="list">

　　<li><label><input type="checkbox" value="1">1.我是记录来的呢</label></li>

　　<li><label><input type="checkbox" value="2">2.哈哈，真的太天真了</label></li>

　　<li><label><input type="checkbox" value="3">3.爱上你是我的错吗？</label></li>

　　<li><label><input type="checkbox" value="4">4.从开始你就不应用爱上我</label></li>

　　<li><label><input type="checkbox" value="5">5.喜欢一个人好难</label></li>

　　<li><label><input type="checkbox" value="6">6.你在那里呢</label></li>  

</ul>

<input type="checkbox" id="all">  

<input type="button" value="全选"class="btn" id="selectAll">  

<input type="button" value="全不选"class="btn" id="unSelect">  

<input type="button" value="反选"class="btn" id="reverse">  

<input type="button" value="获得选中的所有值"class="btn" id="getValue">

$(function(){

　　//全选或全不选

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

　　　　if(this.checked){

　　　　　　$("#list :checkbox").attr("checked",true);

　　　　}else{

　　　　　　$("#list :checkbox").attr("checked",false);

　　　　}

　　});

　　//全选

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

　　　　$("#list :checkbox,#all").attr("checked",true);

　　});

　　//全不选

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

　　　　$("#list :checkbox,#all").attr("checked",false);

　　});

　　//反选*****

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

　　　　$("#list :checkbox").each(function(){

　　　　　　$(this).attr("checked",!$(this).attr("checked"));

　　　　});

　　　　allchk();

　　});

　　//设置全选复选框

　　$("#list :checkbox").click(function(){

　　　　allchk();

　　});

　　//获取选中选项的值

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

　　　　var valArr =newArray;

　　　　$("#list :checkbox[checked]").each(function(i){

　　　　　　valArr[i]= $(this).val();

　　　　});

　　　　var vals = valArr.join(',');

　　　　alert(vals);

　　　　});

　　});

　　function allchk(){

　　var chknum = $("#list :checkbox").size();//选项总个数

　　var chk =0;

　　$("#list :checkbox").each(function(){

　　　　if($(this).attr("checked")==true){

　　　　　　chk++;

　　　　}

　　});

　　if(chknum==chk){//全选

　　　　$("#all").attr("checked",true);

　　}else{//不全选

　　　　$("#all").attr("checked",false);

　　}

}

 

来自为知笔记(Wiz)