Home > Developer > JavaScript
Jquery implements the general method of selecting all or not Selecting All checkboxes
This article mainly introduces the general Writing Method for jquery to achieve full/no selection of checkbox. If you need it, you can refer to it for help.
The Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN">
<Html>
<Head>
<Script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> </script>
<Script type = "text/javascript">
// Name is the attribute used to differentiate chechbox in html forms. Do not use id (must be unique) or other attributes.
Function getValues (){
Var aV = getCheckboxValues ("");
Var bV = getCheckboxValues ("B ");
Var cV = getCheckboxValues ("c ");
Var result = "selected value of Group a:" + (aV = ""? "No value selected": aV) + "n" +
"Selected value of group B:" + (bV = ""? "No value selected": bV) + "n" +
"C group selected value:" + (cV = ""? "No value selected": cV );
Alert (result );
}
Function getCheckboxValues (name ){
Return $ (": checkbox [name =" + name + "]: checked"). map (function (){
Return $ (this). val ();
}). Get (). join (",");
}
Function chkAll (obj ){
Var name = $ (obj). attr ("name ");
// Maybe you think I write it too complex, but there are a lot of jquery versions. It's always good to learn something.
// 1. jquery 1.6 or above
// $ (": Checkbox [name =" + name. substring (0, 1) + "]"). prop ("checked", $ (obj ). prop ("checked "));
// 2. jquery 1.6 or lower
// $ (": Checkbox [name =" + name. substring (0, 1) + "]"). attr ("checked", $ (obj ). attr ("checked "));
// 3. General writing
$ (": Checkbox [name =" + name. substring (0, 1) + "]"). each (function (){
This. checked = obj. checked;
});
}
</Script>
</Head>
<Body>
<Div>
<Span> group 1st (a): <input type = "checkbox" name = "aAll" onclick = "chkAll (this)"/> select all or not </span>
<Input type = "checkbox" name = "a" value = "a1" checked = "checked"/> a1
<Input type = "checkbox" name = "a" value = "a2" checked = "checked"/> a2
<Input type = "checkbox" name = "a" value = "a3"/> a3
<Input type = "checkbox" name = "a" value = "a4"/> a4 <br/>
<Span> group B: <input type = "checkbox" name = "bAll" onclick = "chkAll (this)"/> select all or not </span>
<Input type = "checkbox" name = "B" value = "b1"/> b1
<Input type = "checkbox" name = "B" value = "b2" checked = "checked"/> b2
<Input type = "checkbox" name = "B" value = "b3" checked = "checked"/> b3
<Input type = "checkbox" name = "B" value = "b4"/> b4 <br/>
<Span> group 3 (c): <input type = "checkbox" name = "cAll" onclick = "chkAll (this)"/> select all or not </span>
<Input type = "checkbox" name = "c" value = "c1"/> c1
<Input type = "checkbox" name = "c" value = "c2"/> c2
<Input type = "checkbox" name = "c" value = "c3" checked = "checked"/> c3
<Input type = "checkbox" name = "c" value = "c4" checked = "checked"/> c4 <br/>
<Br/>
<Input type = "button" value = "find the selected value of each group" onclick = "getValues ()"/>
</Div>
</Body>
</Html>
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
