Select all, invert selection and unselect functions implemented by jQuery_html/css

Suitable for scenarios where batch operations are required after multiple selections on a web page (such as batch deletion, etc.). If there are any questions, I hope you can correct me. Thank you~~

HTML

We have a song list on our page that lists multiple lines of song names with matching checkboxes for users to choose, and there is a row of action buttons below the list

<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">

Copy after login

Of course don’t forget to load the jQuery library file first:

jQuery Baidu CDN

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

Copy after login

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

Copy after login

Jquery支持的版本有:2.0.3, 2.0.2, 2.0.1, 2.0.0, 1.10.2, 1.10.1, 1.10.0, 1.9.1, 1.9.0, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.2, 1.7.1, 1.7.0, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.6, 1.2.3

Copy after login

jQuery

1. Select all or none. When the checkbox #all next to the Select All button #selectAll is checked, all options in the list are selected. Otherwise, when unchecked, all options in the list are unchecked.

$("#all").click(function(){        if(this.checked){            $("#list :checkbox").attr("checked", true);       }else{            $("#list :checkbox").attr("checked", false);     }    });

Copy after login

2. Select all. When you click the Select All button #selectAll or check the checkbox #all next to the Select All button, all options in the list will be selected, including the checkbox next to Select All.

$("#selectAll").click(function () {    $("#list :checkbox,#all").attr("checked", true);   });

Copy after login

3. Select none. When the #unSelect button is clicked, all options in the list are unselected, including #all.

$("#unSelect").click(function () {      $("#list :checkbox,#all").attr("checked", false);   });

Copy after login

4. Counter selection. When you click the #reverse button, all selected options in the list become unselected, and all unselected options become selected. Of course, you should also pay attention to the status of #all.

$("#reverse").click(function () {      $("#list :checkbox").each(function () {           $(this).attr("checked", !$(this).attr("checked"));       });     allchk(); });

Copy after login

The above code traverses the option list, then changes the checked attribute and calls the function allchk(). Don’t worry, we will introduce it later.

5. Get all selected values. If we want to interact with the background program, we must get the value of the selected item in the list. We traverse the array, store the value of the selected item in the array, and finally form a string separated by commas (,). Developers can get The corresponding operation is performed on this string.

$("#getValue").click(function(){     var valArr = new Array;     $("#list :checkbox[checked]").each(function(i){         valArr[i] = $(this).val();     });     var vals = valArr.join(',');//转换为逗号隔开的字符串     alert(vals); });

Copy after login

In order to improve the selection option function, when we click an option in the list, if the checked item happens to meet all the selected conditions, #all should also respond accordingly becomes selected. Similarly, if all options are selected in advance, when an option is unchecked, #all will also become unselected accordingly.

//设置全选复选框 $("#list :checkbox").click(function(){     allchk(); });

Copy after login

The function allchk() is used to detect whether the all-select box #all should be selected or unselected. Please see the code.

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

Copy after login

Summary

jQuery operates the checked and unchecked state of the checkbox very simply, use attr() to set the value of the "checked" attribute, true Unselected, false means unselected. During the entire process of selecting all and deselecting, pay attention to handling the selected state of the select all check box and obtaining the value of the selected option. Below I have compiled all the jQuery code together for your reference.

$(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 = new Array;         $("#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);     } }

Copy after login

Examples of the select all, invert selection and unselect functions implemented by jQuery:

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>演示：jQuery实现的全选、反选和不选功能</title><style>.top_title{text-align:center;}.demo{width:520px; margin:40px auto 0 auto; min-height:250px;}ul li{line-height:30px; padding:4px 0; font-size:14px}.btn{overflow: hidden;display:inline-block;*display:inline;padding:4px 20px 4px;font-size:14px;line-height:18px;*line-height:20px;color:#fff;text-align:center;vertical-align:middle;cursor:pointer;background-color:#5bb75b;border:1px solid #cccccc;border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px; margin-left:2px}</style><script src="http://libs.baidu.com/jquery/1.7.2/jquery.js"></script><script>  $(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 = new Array;        $("#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);    }}</script> </head><body><div id="main">   <h2 class="top_title"><a href="http://www.cnblogs.com/phpfensi/p/3853337.html ">jQuery实现的全选、反选和不选功能</a></h2>   <div class="demo">           <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">      </div></div></body></html>

Copy after login

Select all, invert selection and unselect functions implemented by jQuery_html/css_WEB-ITnose

HTML

jQuery

Summary