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);

  }

}





原文地址:https://www.cnblogs.com/mmyh/p/6066178.html