jquery Determines whether a checkbox is selected and changes the checkbox state
jquery checked three ways to determine:
Copy Code code as follows:
. attr (' checked)://See version 1.6+ return: "Checked" or "undefined"; 1.5-return: TRUE or False
. Prop (' checked ')://16+:true/false
. Is (': Checked ')://All Versions: true/false//don't forget the colon!
Several ways to checked jquery assignment:
All jquery versions can be assigned this way:
Copy Code code as follows:
$ ("#cb1"). attr ("Checked", "checked");
$ ("#cb1"). attr ("Checked", true);
jquery1.6+:p 4 kinds of assignment of ROP:
Copy Code code as follows:
$ ("#cb1 ″). Prop (" checked ", true); it's easy to say no.
$ ("#cb1 ″). Prop ({checked:true}); Map Key value pairs
$ ("#cb1 ″). Prop (" Checked ", function () {
Return true;//function returns TRUE or FALSE
});
Remember also this OH: $ ("#cb1 ″). Prop (" Checked "," checked ");
How jquery Determines whether a checkbox (check box) is selected
Everyone knows in HTML if a check box is selected to be checked= "checked".
But if we use jquery alert ($ ("#id"). attr ("Checked"), you will be prompted to be true instead of checked
So many friends judge if ($ ("#id"). attr ("checked") = = "true") This is wrong, in fact, it should be if ($ ("#id"). attr ("checked") ==true)
Examples include a few features.
Copy Code code as follows:
<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" >
Code
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<script language= "JavaScript" src= "Http://www.cnjquery.com/demo/jquery.js "></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 () {
if ($ (this). attr ("checked"))
{
$ (this). Removeattr ("checked");
}
Else
{
$ (this). attr ("Checked", ' true ');
}
})
})
$ ("#btn5"). Click (function () {
var str= "";
$ ("[name= ' checkbox '][checked]"). each (function () {
str+=$ (This). Val () + "" R "N";
Alert ($ (this). Val ());
})
alert (str);
})
})
-->
</SCRIPT>
</HEAD>
<BODY>
<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>
<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
<input type= "checkbox" name= "checkbox" value= "CHECKBOX7" >
checkbox7
<input type= "checkbox" name= "checkbox" value= "Checkbox8" >
Checkbox8
</form>
jquery Determines whether a checkbox is selected
In the HTML checkbox, the selected word will have attributes checked= "checked".
If a checkbox is selected, the value alert ($ "#xxx" for the CheckBox's property "Checked") will print "true" instead of checked "attr".
If not selected, print out "undefined".
Do not try to make such judgments: if ($ "#xxx". attr ("checked") = = "true") or if ($ "#xxx". attr ("checked") = = ' checked ')
should be if ($ ("#checkbox1"). attr ("checked") ==true)
All-Select and all-not-selected functions
Copy Code code as follows:
function Checkall () {
if ($ ("#checkbox1"). attr ("checked") ==true) {
$ ("Input[name= ' XH ']"). each (function () {
$ (this). attr (' checked ', true);
});
}else {
$ ("Input[name= ' XH ']"). each (function () {
$ (this). attr (' checked ', false);
});
}
}
JQuery to determine whether the checkbox is selected, checkbox Select All, Get checkbox selection value
jquery is a very easy to use framework, but there are a lot of things that we need to learn more deeply.
To determine if a checkbox is selected on the web there is a way to choose a variety of ways, the individual feels
More convenient.
Because it's simpler, no technical content, direct code
Copy Code code as follows:
<! 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>jquery Determine if checkbox is selected, checkbox Select All, get checkbox check value </title>
<script type= "Text/javascript" language= "JavaScript" src= "Http://code.jquery.com/jquery-1.6.4.min.js" ></ Script>
<script type= "Text/javascript" >
$ (function () {
/*------------
Select all/all do not choose
------------*/
$ (' #cboxchecked '). Click (function () {
Determine if Apple is selected
var bischecked=$ (' #cboxchecked '). Is (': checked ');
var fruit=$ (' Input[name= "fruit"]);
Bischecked?fruit.attr (' checked ', true): fruit.attr (' checked ', false);
});
/*-------------
Get the selected value
-------------*/
$ (' #btn_submit '). Submit (function () {
$ (' input[name= ' fruit ']:checked '). each (function () {
var sfruit=$ (this). Val ();
alert (sfruit);
});
return false;
});
})
</script>
<body>
<form action= "" >
<input type= "checkbox" id= "cboxchecked"/>
<label for= "cboxchecked" > Full selection </label>
<br/>
<br/>
<input type= "checkbox" id= "cboxapple" name= "fruit" value= "apple"/>
<label for= "Apple" >Apple</label>
<input type= "checkbox" id= "Cboxorange" name= "fruit" value= "orange"/>
<label for= "Orange" >Orange</label>
<input type= "checkbox" id= "Cboxbanana" name= "fruit" value= "banana"/>
<label for= "Banana" >Banana</label>
<input type= "checkbox" id= "cboxgrapes" name= "fruit" value= "grapes"/>
<label for= "Grapes" >Grapes</label>
<br/>
<br/>
<input type= "Submit" id= "Btn_submit" value= "Submit"/>
</form>
</body>
