How to obtain checkbox selection in jquery and other actions and precautions _jquery

1. Get Selected items for checkbox
2. CheckBox option Selection of the optional reverse operation

CheckBox code snippet for the test:

Copy Code code as follows:

<div>
<input type= "checkbox" name= "abc" value= "First Grade" id= "in1" checked= "checked"/><label for= "in1" > First grade </label >
<input type= "checkbox" name= "abc" value= "Second Grade" id= "in2"/><label for= "in2" > Second grade </label>
<input type= "checkbox" name= "abc" value= "Third grade" id= "in3"/><label for= "in3" > Third grade </label>
<input type= "checkbox" name= "abc" value= "Four Grade" id= "in4"/><label for= "In4" > Grade </label>
<input type= "checkbox" name= "abc" value= "Grade Five" id= "In5"/><label for= "In5" > Grade five </label>
<input type= "checkbox" name= "abc" value= "Six Grade" id= "in6"/><label for= "in6" > Six grade </label>
<input type= "checkbox" name= "abc" value= "Seven Grade" id= "in7"/><label for= "in7" > Seven grade </label>
<input type= "checkbox" name= "abc" value= "Eight Grade" id= "In8"/><label for= "In8" > Eight grade </label>
</div>

One: First, 1th, get the checkbox's selected item. Most of the methods found on the Web use each to obtain:

Copy Code code as follows:

$ ("Input[name= ' checkbox '][checked]"). each (function () {
alert (this.value);
})

But in the test I encountered a problem, this method is available under IE, but in Firefox and Chrome browser can not get the current selection, the test results are as follows:

The test effect under IE (mine is IE10):

The effect under IE10:

The effect of Chrome browser:

By searching on Google, you find out why:

URL: Jquery Select how many input checkbox problems, ie normal, FF and Chrome can not get the value

Because I use the jquery version is 1.7.2, so here I have to use: checked to get the line, the modified code:

Copy Code code as follows:

Get checked items
$ (' #huoqu2 '). Click (function () {
$ (' #show '). HTML ("");
$ ("input[name= ' abc ']:checked"). each (function () {
alert (this.value);
$ (' #show '). Append (This.value + "");
});
});

The effect under Chrome:

II: CheckBox Selection of the optional operation:

Since these two are simpler, I'll go directly to the code:

Copy Code code as follows:

Select All/Deselect All
$ (' #quanxuan '). Toggle (function () {
$ ("Input[name= ' abc ']"). attr ("Checked", ' true ');
}, function () {
$ ("Input[name= ' abc ']"). Removeattr ("checked");
});

Anti-election
$ (' #fanxuan '). Click (function () {
$ ("Input[name= ' abc ']"). each (function () {
if ($ (this). attr ("checked")) {
$ (this). Removeattr ("checked");
} else {
$ (this). attr ("Checked", ' true ');
}
});
});

To sum up again:

jquery version before 1.3, gets the action of the checkbox's selected item:

Copy Code code as follows:

$ ("input[name= ' abc '][checked]"). each (function () {
alert (this.value);
});

The jquery version gets the action of the checkbox's selected item after 1.3:

Copy Code code as follows:

$ ("input[name= ' abc ']:checked"). each (function () {
alert (this.value);
});

Complete Test Demo Code:

Copy Code code as follows:

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title></title>
<script src= "Js/jquery-1.7.2.min.js" ></script>

<script>
$ (function () {
Get checked items (invalid under FF and Chrome)
$ (' #huoqu '). Click (function () {

$ ("input[name= ' abc '][checked]"). each (function () {
alert (this.value);
//});

                $ (' #show '). HTML (" ");
                $ ("Input[name=" ABC '][checked] '). each (function () {
                    //alert (This.value);
                     $ (' #show '). Append (This.value + " ");
               });
           });

           //Get checked items
             $ (' #huoqu2 '). Click (function () {
                 $ (' #show '). HTML ("");
                $ ("Input[name=" ABC ']:checked '). each (function () {
                    //alert (This.value);
                     $ (' #show '). Append (This.value + " ");
               });
           });

Select All/Deselect All
$ (' #quanxuan '). Toggle (function () {
$ ("Input[name= ' abc ']"). attr ("Checked", ' true ');
}, function () {
$ ("Input[name= ' abc ']"). Removeattr ("checked");
});

Anti-election
$ (' #fanxuan '). Click (function () {
$ ("Input[name= ' abc ']"). each (function () {
if ($ (this). attr ("checked")) {
$ (this). Removeattr ("checked");
} else {
$ (this). attr ("Checked", ' true ');
}
});
});
});

</script>
<body>
<form id= "Form1" runat= "Server" >
<div>
<input type= "checkbox" name= "abc" value= "First Grade" id= "in1" checked= "checked"/><label for= "in1" > First grade </label >
<input type= "checkbox" name= "abc" value= "Second Grade" id= "in2"/><label for= "in2" > Second grade </label>
<input type= "checkbox" name= "abc" value= "Third grade" id= "in3"/><label for= "in3" > Third grade </label>
<input type= "checkbox" name= "abc" value= "Four Grade" id= "in4"/><label for= "In4" > Grade </label>
<input type= "checkbox" name= "abc" value= "Grade Five" id= "In5"/><label for= "In5" > Grade five </label>
<input type= "checkbox" name= "abc" value= "Six Grade" id= "in6"/><label for= "in6" > Six grade </label>
<input type= "checkbox" name= "abc" value= "Seven Grade" id= "in7"/><label for= "in7" > Seven grade </label>
<input type= "checkbox" name= "abc" value= "Eight Grade" id= "In8"/><label for= "In8" > Eight grade </label>
</div>
<br/>
<input type= "button" id= "Huoqu" value= "Get Selected items (invalid under FF and chrome)"/>
<input type= "button" id= "Quanxuan" value= "all Select/Deselect All"/>
<input type= "button" id= "Fanxuan" value= "anti-election"/>
<input type= "button" id= "Huoqu2" value= "Get Checked"/>
<br/>
Checked: <div id= "Show" >

</div>
</form>
</body>

Author: Cool Kid