Select All For jquery and select all for jquery.
1. Overview
In a project, you can select all check boxes in the list... ..
2. example
<Html> <body> <form id = "test-form" action = "test"> <legend> select the programming language you want to learn: </legend> <fieldset> <p> <label class = "selectAll"> <input type = "checkbox"> <span class = "selectAll"> select all </span> <span class = "deselectAll"> deselected </span> </label> <a href = "#0" class = "invertSelect"> reselect </a> </p> <p> <label> <input type = "checkbox" name = "lang" value = "javascript"> JavaScript </label> </p> <label> <input type = "checkbox" name = "lang" val Ue = "python"> Python </label> </p> <label> <input type = "checkbox" name = "lang" value = "ruby"> Ruby </label> </p> <label> <input type = "checkbox" name = "lang" value = "haskell"> Haskell </label> </p> <p> <label> <input type = "checkbox" name = "lang" value = "scheme"> Scheme </label> </p> <button type = "submit"> Submit </button> </p> </fieldset> </form> <script src = "jquery-3.1.0.js"> </script> <script type = "text /javascrip T "> $ (function () {var form = $ ('# test-form'), langs = form. find ('[name = lang]'), selectAll = form. find ('label. selectAll: checkbox '), selectAllLabel = form. find ('label. selectAll span. selectall'), deselectAllLabel = form. find ('label. selectAll span. deselectall'), invertSelect = form. find ('a. invertSelect '); // reset the initialization status: form. find ('*'). show (). off (); form. find (': checkbox '). prop ('checked', fals E ). off (); deselectAllLabel. hide (); // intercept the form submission event: form. off (). submit (function (e) {e. preventDefault (); alert (form. serialize () ;}); var count = 1; // select all/select none box selectAll. click (function () {if (count ++ % 2) {selectAllLabel. hide (); deselectAllLabel. show (); $ (this ). prop ("checked", false); langs. prop ("checked", true);} else {selectAllLabel. show (); deselectAllLabel. hide (); $ (this ). prop ("checked", false); Langs. prop ("checked", false) ;}}); invertSelect. on ('click', function () {langs. map (function () {$ (this ). prop ('checked ',! This. checked) ;}) ;}() ;}); </script> </body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
