<!DOCTYPE HTML> <HTMLLang= "en"> <Head> <MetaCharSet= "UTF-8"> <title>Select all, do not select, reverse Select</title> <styletype= "Text/css">#choose Input{Display:Block; } </style> <Scriptsrc= "Http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></Script> <Scripttype= "Text/javascript"> $(function(){ var$choose= $("#choose Input"); //Select All $("#all"). Click (function() {$choose. each (function(){ $( This). Prop ("checked",true); }); }); //all do not choose $("#not"). Click (function() {$choose. Prop ("checked",false); }); //Inverse Selection $("#reverse"). Click (function() {$choose. each (function(){ $( This). Prop ("checked",!$( This). Prop ("checked")); }); }); }); </Script> </Head> <Body> <DivID= "Box-function"> <inputID= "All"type= "button"value= "Select All" /> <inputID= "not"type= "button"value= "All is not selected" /> <inputID= "Reverse"type= "button"value= "Reverse Selection" /> </Div> <DivID= "Choose"> <inputtype= "checkbox" /> <inputtype= "checkbox" /> <inputtype= "checkbox" /> <inputtype= "checkbox" /> <inputtype= "checkbox" /> <inputtype= "checkbox" /> <inputtype= "checkbox" /> <inputtype= "checkbox" /> <inputtype= "checkbox" /> <inputtype= "checkbox" /> <inputtype= "checkbox" /> <inputtype= "checkbox" /> </Div> </Body> </HTML>
Full selection, no selection, and inverse selection of jquery