JS and jquery implement checkbox check box full selection/All-_javascript technique

This article describes the JS and jquery implementation checkbox checkbox full selection/All-do not select the method. Share to everyone for your reference, specific as follows:

Let's take a look at the JavaScript implementation checkbox check box selection/All method. This should be a more practical front-end technique, many times we need to click a checkbox, and then all the check boxes automatically selected, such as Sina Mailbox, some of the CMS system in the background, the use of this JS effect, will greatly enhance the operation experience, then exactly how to achieve this function? Don't worry, follow me step-by-step.

Let's start with a list of those with check boxes, not all of them, not all of them, probably 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 a checkbox next to the list that controls the checkbox:

Select All

Copy Code code as follows:

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

The following is the definition of click on the selected checkbox to execute the JS code, with JS traverse all the checkbox and change the state 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>

Below also has a kind of realization JS all Select, the function of the inverse chooses, direct post code, oneself tidy up.

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

<!--put a control button-->
all select <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<a.length;i++) {
    a[i].checked = o.checked;
  }}
</script>

Either way, it's easier to choose between two methods.

Here is a look at the jquery implementation checkbox check box select/all do not select the method. While using JavaScript is easy to implement, the code is very cumbersome.

Let me introduce you to some of your friends about how to use jquery specifically.

Jquery.attr Gets/Sets the property value of an object, such as:

$ ("Input[name= ' chk_list ']"). attr ("checked"); Reads the status of all name ' Chk_list ' objects (checked)
$ ("Input[name= ' chk_list ')"). attr ("Checked", true);//Set all name to ' Chk_ Checked of List ' object is True

Another example:

$ ("#img_1"). attr ("src", "test.jpg"); Set the value of the SRC with ID img_1 to ' test.jpg '
$ (' #img_1 '). attr ("src");//read img_1 value with ID src

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/>
type= "checkbox" Name= "checkbox_name[]" id= "checkbox_name_4″/>4<br/> <input type=
" checkbox "Name=" Checkedall "id=" checkedall/> Select/deselect 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 {//uncheck all
$ (" Input[name= ' checkbox_name[] '). each (function () {
$ (this). attr ("checked", false);})
;
//-->
</script>

I hope this article will help you with JavaScript programming.