zoukankan      html  css  js  c++  java
  • 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);

      }

    }





  • 相关阅读:
    ElasticSearch Index API && Mapping
    jQuery静态方法type使用和源码分析
    jQuery原型属性和方法总结
    jQuery原型方法first,last,eq,slice源码分析
    jQuery原型方法.pushStack源码分析
    解决浏览器窗口变小后右侧出现空白背景颜色或者图片不能全屏填充的方法
    js方法实现rgb颜色转换成16进制格式的代码的方法
    一个解决表单中的文字和文本区域(textarea)上对齐的方法
    jquery原型方法map的使用和源码分析
    jQuery原型方法each使用和源码分析
  • 原文地址:https://www.cnblogs.com/mmyh/p/6066178.html
Copyright © 2011-2022 走看看