jquery implements simple full selection and inverse selection functions

jquery implements simple full selection and inverse selection functions_jquery

WBOY

Release： 2016-05-16 15:22:24

Original

983 people have browsed it

First let’s look at a simple example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery实现CheckBox全选、全不选</title>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>  <script type="text/javascript">
    $(function() {
      $("#checkAll").click(function() {
        $('input[name="subBox"]').attr("checked",this.checked); 
      });
      var $subBox = $("input[name='subBox']");
      $subBox.click(function(){
        $("#checkAll").attr("checked",$subBox.length == $("input[name='subBox']:checked").length &#63; true : false);
      });
    });
  </script>
 
</head>
<body>
  <div>
    <input id="checkAll" type="checkbox" />全选
    <input name="subBox" type="checkbox" />项1
    <input name="subBox" type="checkbox" />项2
    <input name="subBox" type="checkbox" />项3
    <input name="subBox" type="checkbox" />项4
  </div>
</body>
</html>

Copy after login

Let me share with you a piece of code based on jQuery to implement the functions of selecting all, inverting and deselecting the checkbox list. It is suitable for scenarios where batch operations are required after multiple selections on a web page (such as batch deletion, etc.). The article combines examples with concise code and basically covers all aspects of option selection operations. I hope it can help front-end development enthusiasts in need.

Introducing jquery library

<script src="http://ajax.useso.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Copy after login

Build HTML

Generally, lists read from the database need to be selected in batches for deletion and editing. Let’s simulate it below to realize whether to select all checkboxes or not. First create html

<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

jQuery code

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 code traverses the option list, then changes the checked attribute, and finally calls the function allchk(), which will be introduced 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 selected option function, when we click an option in the list, if the checked item happens to meet all the selected conditions, #all will also become selected accordingly. Similarly, if all the selected items are selected in advance, When an option is selected, and when an option is unchecked, #all will also become unchecked 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 status of the checkbox very simply. Use attr() to set the value of the "checked" attribute. True is unchecked, false is unchecked. Pay attention to handling all the selections and inverse selections during the entire process. Select the checked state of the checkbox and get 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