1. Select All
2. Cancel all elections
3. Select All Odd
4. Anti-election
5. Get all the selected values
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>louis-blog >> jQuery Operations on a checkbox </title>
<mce:script type= ' text/javascript ' src= ' http://leotheme.cn/wp-includes/js/jquery/jquery.js ' mce_src= ' http:// Leotheme.cn/wp-includes/js/jquery/jquery.js "></mce:script>
<script language= "JavaScript" >
<!--
$ ("document"). Ready (function () {
$ ("#btn1"). Click (function () {
$ ("[name= ' checkbox ']"). attr ("Checked", ' true ');/select All
})
$ ("#btn2"). Click (function () {
$ ("[name= ' checkbox ']"). Removeattr ("checked");/Cancel All selection
})
$ ("#btn3"). Click (function () {
$ ("[name= ' checkbox ']:even"). attr ("Checked", ' true ');//Select All odd numbers
})
$ ("#btn4"). Click (function () {
$ ("[name= ' checkbox ']"). each (function () {//anti-election
if ($ (this). attr ("checked")) {
$ (this). Removeattr ("checked");
}
else{
$ (this). attr ("Checked", ' true ');
}
})
})
$ ("#btn5"). Click (function () {//Output selected value
var str= "";
$ ("[name= ' checkbox '][checked]"). each (function () {
str+=$ (This). Val () + "/r/n";
Alert ($ (this). Val ());
})
alert (str);
})
})
-->
</SCRIPT>
</HEAD>
<body style= "text-align:center;margin:0 auto;font-size:12px;" mce_style= "text-align:center;margin:0 auto;" font-size:12px; " >
<div style= "border:1px solid #999; width:500px; padding:15px; Background: #eee; margin-top:150px; " >
<form name= "Form1" method= "Post" action= "" >
<input type= "button" id= "BTN1" value= "Select All" >
<input type= "button" id= "Btn2" value= "deselect All" >
<input type= "button" id= "Btn3" value= "Select All Odd" >
<input type= "button" id= "Btn4" value= "anti-selection" >
<input type= "button" id= "Btn5" value= "Get All values selected" >
<br/><br/>
<input type= "checkbox" name= "checkbox" value= "CheckBox1" >
CheckBox1
<input type= "checkbox" name= "checkbox" value= "CheckBox2" >
CheckBox2
<input type= "checkbox" name= "checkbox" value= "Checkbox3" >
Checkbox3
<input type= "checkbox" name= "checkbox" value= "Checkbox4" >
Checkbox4
<input type= "checkbox" name= "checkbox" value= "CHECKBOX5" >
Checkbox5
<input type= "checkbox" name= "checkbox" value= "checkbox6" >
Checkbox6
</form>
</div>
</body>
</HTML>
