Simple example demonstration of how to use checkbox in jquery_jquery

Share with you a piece of code based on jQuery that implements 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

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

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, all options in the list are unchecked.

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

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

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

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

4. Counter selection. When you click the reverse selection button #reverse, all selected options in the list will become unselected, and all unselected options will 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(); 
});

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 perform corresponding operations by obtaining 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); 
});

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

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

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

Through this article, I hope you will have a general understanding of how to use checkbox in jquery, and then master the use of checkbox proficiently through a large number of examples.