Of Stack

js and jQuery implement the checkbox check box to select all and

  • 2020-11-18 06:07:55
  • OfStack

This article gives an example of how js and jQuery implement the checkbox check box all/none. To share for your reference, the details are as follows:

First, let's look at how JavaScript implements the checkbox check box all/none. This should be the front end of a practical tips, many times we all have to click on a checkbox, then all checkbox automatically selected, such as sina mailbox, 1 in the background of some CMS system, after using this JS effects, will greatly enhance the operating experience, so what exactly is how to realize the function of 1? Don't worry, follow me step by step.

So let's get the checkbox list out of the way, and it looks something like this: 


<input type=checkbox name=chk>
<input type=checkbox name=chk>
<input type=checkbox name=chk>
<input type=checkbox name=chk>
<input type=checkbox name=chk>
<input type=checkbox name=chk>

Then we put an Checkbox next to the list that controls checkbox:

Selection: 

<input type=checkbox onclick=sel('chk')>

Here is the definition of the JS code to execute after clicking checkBox select all, traversing all checkbox with JS and changing the state of checkbox: 


<script language="javascript">
 function sel(a){
 o=document.getElementsByName(a)
 for(i=0;i<o.length;i++)
 o[i].checked=event.srcElement.checked
 }
</script>

There is also a realization of JS full selection, anti-selection function, directly post the code, their own arrangement. 


<input type=checkbox name=m>
<input type=checkbox name=m>
<input type=checkbox name=m>



<!-- put 1 Three buttons to control all options -->
 Future generations <input type="checkbox" value="1" onclick="mm(this)">
<script language=javascript>
<!--JS Part of the -->
function mm(o)
{
  var a = document.getElementsByName("m");
  for (var i=0;i<a.length;i++){
    a[i].checked = o.checked;
  }
}
</script>

So let's do either one. It's easier.

Here's how jQuery implements the checkbox checkbox all/none option. While JavaScript is easy to implement, the code is cumbersome.

Now Let me introduce to you the specific operation method of using jQuery.

jQuery. attr gets/sets the property values of the object, such as: 


$("input[name='chk_list']").attr("checked"); // Read all name for 'chk_list' Object status (checked or not) 
$("input[name='chk_list']").attr("checked",true); // Set all the name for 'chk_list' The object's checked for true

Such as: 


$("#img_1").attr("src","test.jpg"); // Set up the ID for img_1 the <img>src The value of 'test.jpg'
$("#img_1").attr("src"); // read ID for img_1 the <img>src value

Case 1: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <meta charset="utf-8">
<script src="jquery-1.7.2.min.js"></script>
<script>
 $(document).ready(function(){
 // Whether to choose to judge 
 $(".btn").click(function(){
  if ($("input:checkbox:checked").length == 0)
  {
  alert(' You didn't choose a hobby ');
  }
 });
 // Reverse choice 
  $(".btn1").click(function(){
  $("input[type=checkbox]").each(function(){
  if ($(this).attr("checked"))
  {
   $(this).attr("checked",false);
  }else{
   $(this).attr("checked",true);
  }
  });
  });
  });
 </script>
 </head>
<body>
 Hobbies: 
<input type="checkbox" name="fav[]" value="read"> reading 
<input type="checkbox" name="fav[]" value="music"> music 
<input type="checkbox" name="fav[]" value="sport"> sports <br />
<input type="button" name="btn" class="btn" value=" submit ">
<input type="button" name="btn1" class="btn1" value=" The selected ">
</body>
</html>

Example 2: 


<script src="jquery-1.3.2.min.js"></script>
<input type="checkbox" name="checkbox_name[]" id="checkbox_name_1 "  />1<br /> <input type="checkbox" name="checkbox_name[]" id="checkbox_name_2 "  />2<br />
<input type="checkbox" name="checkbox_name[]" id="checkbox_name_3 "  />3<br />
<input type="checkbox" name="checkbox_name[]" id="checkbox_name_4 "  />4<br />
<input type="checkbox" name="checkedAll" id="checkedAll"/> Future generations / To cancel all 
<script type="text/javascript">
<!--
$(function() {
$("#checkedAll").click(function() {
if ($(this).attr("checked") == true) { //  Future generations 
$("input[name='checkbox_name[]']").each(function() {
$(this).attr("checked", true);
});
} else { //  To cancel all 
$("input[name='checkbox_name[]']").each(function() {
$(this).attr("checked", false);
});
}
});
});
// -->
</script>

I hope this article has been helpful in JavaScript programming.

Related articles: