jquery Form checkbox Operation detailed

You can't write this directly in HTML:

The code is as follows	Copy Code
<input type= "checkbox" Name= "SF" checked= "checked" >

Generally, the above code is checked with HTML default. But if you use jquery Ajax to submit the form, whether you check it or not, it will be submitted. Because your judgment is not allowed.

The code is as follows	Copy Code
if (checkbox.attr (' checked ')) {}

For example, the above judgment, even if you hook off the check, or a value will be submitted. The HTML hasn't changed since you hooked it up. You can use jquery to change HTML. So it's best not to write checked= "checked" in your input.
Such as:

The code is as follows	Copy Code
JQuery ("#sKeepLogin"). attr (' checked ') = = "Checked"? 1:0

There is also a judgment:

The code is as follows	Copy Code
if ($ ("input[type= ' checkbox ']"). Prop ("checked"))

This is only available in jquery1.6. But today I tested, there is a problem. I obviously loaded the juqery1.7, or the prop method is not used.

I had to change it to:

The code is as follows	Copy Code
var val = $ (". Bottomimg. Box_info input[type= ' checkbox ')"). attr ("checked"); if (val== "Checked" | | | val==true) {}

Here, as I first understood it,

The code is as follows	Copy Code
if (val== "checked")

This should be done, but in some cases there is a problem. Val's value will become true
So it becomes the top.

Because the check box is generally selected for more than one, you can cycle the output

The code is as follows	Copy Code
$ ("input[type=checkbox][checked]"). each (function () { Alert ($ (this). Val ()); });

Checked Problem of checkbox

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 property "checked" of the checkbox for alert is printed "true" instead of "checked" attr ("checked").

If not selected, print out "undefined".

Notice the red part.

The code is as follows	Copy Code
$ ("#chekbox"). Sttr ("checked")//should is print "true", not "checked"

Tested to prove a problem with the above statement

The code is as follows	Copy Code
<script type= "Text/javascript" > $ (function () { $ ("#button"). Click (function () { Alert ($ ("#checkbox"). attr ("checked"); }); }); </script> <input type= "checkbox" name= "checkbox" id= "checkbox" ><input type= "button" id= "button" value= "click Me" >

The result is that if a checkbox is checked, the "checked" will be printed, and if the cancellation check will print out "undefined"
The experiment proves that jquery gets checked's worth printing out "true" is wrong
Extrapolate
And found that jquery has been hooked on the checkbox, is always "checked" This is confusing, if someone knows why, you can tell me, ha ~

The code is as follows	Copy Code
<script type= "Text/javascript" > $ (function () { $ ("#button"). Click (function () { Alert ($ ("#checkbox"). attr ("checked"); }); }); </script> <input type= "checkbox" name= "checkbox" id= checkbox "checked><input type=" button "id=" button "value=" click Me ">

Note that the red position, if the default checkbox is checked state, the test will find that the check out will only output "checked", that does not understand why jquery is so
solution, or use Document.get to get it:

The code is as follows	Copy Code
<script> function Getcheckbox () { var test = document.getElementById ("checkbox"). Checked; alert (test); } </script> <input type= "checkbox" name= "checkbox" id= "checkbox" ><input type= "button" id= "button" value= "click Me" Onclick= "Getcheckbox ()" > Select ' True ' to uncheck ' false '

"

Instance

The code is as follows

Copy Code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <title></title> <script src= "Scripts/jquery-1.7.min.js" type= "Text/javascript" ></script> <script type= "Text/javascript" > $ (function () { Select All $ ("#btnCheckAll"). Bind ("click", Function () { $ ("[name = Chkitem]:checkbox"). attr ("Checked", true); }); No choice. $ ("#btnCheckNone"). Bind ("click", Function () { $ ("[name = Chkitem]:checkbox"). attr ("checked", false); }); Anti-election $ ("#btnCheckReverse"). Bind ("click", Function () { $ ("[name = Chkitem]:checkbox"). each (function () { $ (this). attr ("Checked",!$ (This). attr ("checked")); }); }); No choice. $ ("#btnSubmit"). Bind ("click", Function () { var result = new Array (); $ ("[name = Chkitem]:checkbox"). each (function () { if ($ (this). Is (": Checked")) { Result.push ($ (this). attr ("value")); } }); Alert (Result.join (",")); }); }); </script> <body> <div> <input name= "Chkitem" type= "checkbox" value= "Today's topic"/> Today's topic <input name= "Chkitem" type= "checkbox" value= "Visual focus"/> Visual focus <input name= "Chkitem" type= "checkbox" value= "Finance"/> Finance <input name= "Chkitem" type= "checkbox" value= "Car"/> Car <input name= "Chkitem" type= "checkbox" value= "Technology"/> Technology <input name= "Chkitem" type= "checkbox" value= "real estate"/> Real Estate <input name= "Chkitem" type= "checkbox" value= "Tourism"/> Tourism </div> <div> <input id= "Btncheckall" type= "button" value= "Select All"/> <input id= "Btnchecknone" type= "button" value= "All do not choose"/> <input id= "Btncheckreverse" type= "button" value= "anti-election"/> <input id= "btnsubmit" type= "button" value= "Submit"/> </div> </body>