JQuery form checkbox Operation Details

Checkbox is a special form element. Next I will introduce you to the details of jQuery form checkbox operations. If you need to know more, try it.

You cannot directly write in html as follows:

The Code is as follows:	Copy code
<Input type = "checkbox" name = "sf" checked = "checked">

Generally, the above Code is checked by default in html. However, if you use jquery ajax to submit a form, it will be submitted no matter whether you select it or not. Because your judgment is inaccurate.

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

For example, in the above judgment, even if you have checked the selected value, some values will be submitted. Because the html has not changed after you hook it up. You can use jQuery to change html. So it is best not to write checked = "checked" in your input"
For example:

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 and later versions. But today I tested it and it was a problem. I obviously loaded juqery1.7, or the prop method is not available.

I had to change it:

The Code is as follows:	Copy code
Var val = $ (". bottomimg. box_info input [type = 'checkbox']"). attr ("checked "); If (val = "checked" | val = true ){}

Here is my earliest understanding

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

It should be done in this way, but in some cases there is still a problem. The val value is true.
So it turns into the above.

// Since check boxes are usually selected multiple times, you can output them cyclically.

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

Checkbox checked

Jquery checks whether checkbox is selected

In the checkbox of html, the selected property will be checked = "checked ".

If a checkbox is selected, alert indicates the value of alert ($ (# xxx) for the checkbox attribute "checked ). attr ("checked") will print "true" instead of "checked "!

If not selected, the output is "undefined ".

Pay attention to the red part.

The Code is as follows:	Copy code
$ ("# Chekbox"). sttr ("checked") // shocould be print "true", not "checked"

The test proves that the above statement has a problem.

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 above result is: If checkbox is checked, "checked" is printed. If it is canceled, "undefined" is printed"
The experiment proves that it is wrong for Jquery to obtain the checked value and print "true ".
Trigger:
It is also confusing to find the checkbox that has been checked by Jquery. If anyone knows why, let me know ~~

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">

// Pay attention to the red position. If the checkbox is in the checked status by default, the test will find that if you remove the check box, only "checked" will be output, indicating that you do not understand why Jquery is like this.
Solution: Use document. get to get the solution:

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". deselect "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"> <Html xmlns = "http://www.w3.org/1999/xhtml"> <Head runat = "server"> <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 ); }); // None $ ("# BtnCheckNone"). bind ("click", function (){ $ ("[Name = chkItem]: checkbox"). attr ("checked", false ); }); // Invert Selection $ ("# BtnCheckReverse"). bind ("click", function (){ $ ("[Name = chkItem]: checkbox"). each (function (){ $ (This). attr ("checked ",! $ (This). attr ("checked ")); }); }); // None $ ("# 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> </Head> <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 = "Auto"/> auto <Input name = "chkItem" type = "checkbox" value = "technology"/> Technology <Input name = "chkItem" type = "checkbox" value = ""/> 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 = "NONE"/> <Input id = "btnCheckReverse" type = "button" value = "invert"/> <Input id = "btnSubmit" type = "button" value = "Submit"/> </Div> </Body> </Html>