Previously, I used Native JS to write checkbox-similar to the full mailbox selection function. Click here. Recently I am studying jquery. Today I am taking the time to use jquery to write a checkbox-similar to the full mailbox selection function.
Copy codeThe Code is as follows: <! Doctype html>
<Html lang = "en-US">
<Head>
<Meta charset = "UTF-8">
<Title> checkbox </title>
</Head>
<Body>
<Input type = "checkbox" name = "btn" id = "btn"/> <label for = "btn"> select all or not </label> <br/>
<Input type = "checkbox" name = "choose" id = "checkbox1"/> <label for = "checkbox1"> Option 1 </label> <br/>
<Input type = "checkbox" name = "choose" id = "checkbox2"/> <label for = "checkbox2"> Option 2 </label> <br/>
<Input type = "checkbox" name = "choose" id = "checkbox3"/> <label for = "checkbox3"> Option 3 </label> <br/>
<Input type = "checkbox" name = "choose" id = "checkbox4"/> <label for = "checkbox4"> Option 4 </label> <br/>
<Input type = "checkbox" name = "choose" id = "checkbox5"/> <label for = "checkbox5"> Option 5 </label> <br/>
<Input type = "checkbox" name = "choose" id = "checkbox6"/> <label for = "checkbox6"> Option 6 </label> <br/>
<Input type = "checkbox" name = "choose" id = "checkbox7"/> <label for = "checkbox7"> Option 7 </label> <br/>
<Input type = "checkbox" name = "choose" id = "checkbox8"/> <label for = "checkbox8"> Option 8 </label> <br/>
<Input type = "checkbox" name = "choose" id = "checkbox9"/> <label for = "checkbox9"> Option 9 </label> <br/>
<Input type = "checkbox" name = "choose" id = "checkbox10"/> <label for = "checkbox10"> Option 10 </label> <br/>
<A href = "javascript:;" id = "btn2"> invert selection </a>
</Body>
</Html>
<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>
Tips: If jquery is used, you need to introduce the jquery library.
PS: The above are some of the effects I have learned through jquery.
