Js and jQuery implement the checkbox check box all/all do not select the method, jquerycheckbox

Js and jQuery implement the checkbox check box all/all do not select the method, jquerycheckbox

The example in this article describes how to select all or not select the checkbox check boxes in js and jQuery. We will share this with you for your reference. The details are as follows:

First, let's take a look at the JavaScript checkbox check box all select/all do not select the method. This should be a practical front-end technique. In many cases, we need to click a checkbox and automatically select all the check boxes, such as in Sina mail, in the background of some CMS systems, the use of this JS effect will greatly enhance the operation experience. How does one implement this function? Don't worry. Let me implement it step by step.

First, let's figure out the statuses of the list with check boxes, which are not fully selected yet. This is probably the case:

<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 a checkbox next to the list that controls the Checkbox:

Select All:Copy codeThe Code is as follows: <input type = checkbox onclick = sel ('chk')>

The following is the JS code to be executed after you click the all-selected checkBox. Use JS to traverse all the checkboxes and change the status of the 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 function to achieve full and inverse JS selection. Post the Code directly, and sort it out by yourself.

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

<! -- Put a button for selecting all controls --> select all <input type = "checkbox" value = "1" onclick = "mm (this)"> <script language = javascript> <! -- JS part --> function mm (o) {var a = document. getElementsByName ("m"); for (var I = 0; I <. length; I ++) {a [I]. checked = o. checked ;}}</script>

Either of the two methods is easier.

Next we will introduce the methods for jQuery to select all or not select the checkbox check box. Although JavaScript is easy to implement, the code is very troublesome.

Next, I will introduce you to the specific operations on jQuery.

JQuery. attr gets/Sets object attribute values, such:

$ ("Input [name = 'chk _ list']"). attr ("checked"); // read the status of all objects whose names are 'chk _ List' (whether or not selected) $ ("input [name = 'chk _ list']"). attr ("checked", true); // set the checked value of all objects whose names are 'chk _ list' to true.

Another example is:

$ ("# Img_1 "). attr ("src", "test.jpg"); // set the value of  srcto 'test.jpg '$ ("# img_1") with the ID of img_1 "). attr ("src"); // read the  src value whose ID is img_1

Example 1:

<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> 
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 = "checkedA Ll "/> select all/cancel all <script type =" text/javascript "> <! -- $ (Function () {$ ("# checkedAll "). click (function () {if ($ (this ). attr ("checked") = true) {// select all $ ("input [name = 'checkbox _ name [] ']"). each (function () {$ (this ). attr ("checked", true) ;}) ;}else {// cancel all $ ("input [name = 'checkbox _ name [] ']"). each (function () {$ (this ). attr ("checked", false) ;}}}) ;}); // --> </script>
I hope this article will help you design JavaScript programs.
Articles you may be interested in:

 

 
  
Select all the checkboxes for jquery and js operations
 
  
JS and Jquery get the values of the select, dropdownlist, and checkbox drop-down lists (sample code)
 
  
Jquery CheckBox full selection method code attachment js checkbox full selection inverse selection code
 
  
JQuery-based javascript table hover color/recovery, table click color/recovery, click row select Checkbox
 
  
Js implements the checkbox full selection, deselection, and invert Selection Method
 
  
Example of js checkbox full selection and invert Selection
 
  
Javascript code for selecting and canceling all CheckBox
 
  
Jquery performs the checkbox operation to select all and cancel all
 
  
JQuery checks whether the checkbox (check box) is selected, selects all, and reselect the implementation code.