Previously used in the original JS written checkbox--similar to the full choice of mailbox features, click here. Recently in learning jquery, today I took the time to write a checkbox--similar to a mailbox full selection feature in jquery.
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>checkbox</title>
<body>
<input type= "checkbox" Name= "btn" id= "btn"/><label for= "BTN" > select all/All </label><br/>
<input type= "checkbox" Name= "Choose" id= "CheckBox1"/><label for= "CheckBox1" > Options 1</label><br/ >
<input type= "checkbox" Name= "Choose" id= "CheckBox2"/><label for= "CheckBox2" > Options 2</label><br/ >
<input type= "checkbox" Name= "Choose" id= "Checkbox3"/><label for= "Checkbox3" > Options 3</label><br/ >
<input type= "checkbox" Name= "Choose" id= "checkbox4"/><label for= "checkbox4" > Options 4</label><br/ >
<input type= "checkbox" Name= "Choose" id= "checkbox5"/><label for= "checkbox5" > Options 5</label><br/ >
<input type= "checkbox" Name= "Choose" id= "checkbox6"/><label for= "checkbox6" > Options 6</label><br/ >
<input type= "checkbox" Name= "Choose" id= "checkbox7"/><label for= "checkbox7" > Options 7</label><br/ >
<input type= "checkbox" Name= "Choose" id= "checkbox8"/><label for= "checkbox8" > Options 8</label><br/ >
<input type= "checkbox" Name= "Choose" id= "checkbox9"/><label for= "checkbox9" > Options 9</label><br/ >
<input type= "checkbox" Name= "Choose" id= "checkbox10"/><label for= "checkbox10" > Options 10</label><br />
<a href= "javascript:;" id= "btn2" > Anti-election </a>
</body>
<script type= "Text/javascript" src= "/js/jquery.min.js" ></script>
<script type= "Text/javascript" >
$ (function () {
var checkboxes = $ (' input[name=choose] ');
var btn = $ (' #btn ');
var btn2 = $ (' #btn2 ');
Btn.click (function () {
Checkboxes.attr (' checked ', this.checked);
});
Checkboxes.click (function () {
var flag = true;
Checkboxes.each (function () {
if (!this.checked) flag = false;
});
Btn.attr (' checked ', flag);
});
Btn2.click (function () {
var flag = true;
Checkboxes.each (function () {
this.checked =!this.checked;
if (!this.checked) flag = false;
});
Btn.attr (' checked ', flag);
});
});
</script>
Small Tips: If you use jquery, you need to introduce the jquery library.
PS: The above is I learned by the jquery knowledge, random write some effects.
