Shulou(Shulou.com)06/03 Report--

This article mainly shows you "jQuery how to operate radio, checkbox, select", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "jQuery how to operate radio, checkbox, select" this article.

1. Radio: check box

HTML Code:

one

two

three

four

Js operation code:

/ / determine whether the checkbox is selected

JQuery ("input [type = 'radio'] [name='radio']: checked") .length = = 0? "none of the checkboxes are selected": "already selected"

/ / get the values of a set of radio selected items

JQuery ('input [type = "radio"] [name= "radio"]: checked') .val ()

/ / set one of value = 2 to be selected

JQuery ("input [type = 'radio'] [name='radio'] [value='2']") .attr ("checked", "checked")

/ / set an item of id=radio2 to be selected

JQuery ("# radio2") .attr ("checked", "checked")

/ / set index = 1, that is, the second item is currently selected

JQuery ("input [type = 'radio'] [name='radio']"). Get (1). Checked = true

/ / if an item of id=radio2 is selected, isChecked = true, otherwise isChecked = false

Var isChecked = jQuery ("# radio2") .attr ("checked")

/ / if an item of value=2 is selected, isChecked = true, otherwise isChecked = false

Var isChecked = jQuery ("input [type = 'radio'] [name='radio'] [value='2']") .attr ("checked")

2. Checkbox: check box

HTML Code:

Select all / cancel all

one

two

three

four

five

Js operation code:

/ / get the value of the check box for the specified id

Var val = jQuery ("# checkbox_id1") .val ()

/ / determine whether the check box of id=checkbox_id3 is selected

/ / if checked, isSelected=true; is isSelected=false.

Var isSelected = jQuery ("# checkbox_id3") .attr ("checked")

JQuery ("# checkbox_id3") .attr ("checked", true); / / or

/ / check the check box of id=checkbox_id3, that is, check

JQuery ("# checkbox_id3") .attr ("checked", 'checked')

JQuery ("# checkbox_id3") .attr ("checked", false); / / or

/ / leave the check box of id=checkbox_id3 unchecked, that is, leave it unchecked

JQuery ("# checkbox_id3") .attr ("checked",'')

/ / check the check box of name=checkbox and value=3 and check it.

JQuery ("input [name = checkbox] [value=3]") .attr ("checked", 'checked')

/ / leave the check box of name=checkbox and value=3 unchecked, that is, leave it unchecked

JQuery ("input [name = checkbox] [value=3]") .attr ("checked",'')

/ / set index = 2, that is, the third item is selected

JQuery ("input [type = checkbox] [name=checkbox]") .get (2) .checked=true

/ / since multiple check boxes are generally selected, you can cycle through the selected values.

JQuery ("input [type = checkbox]: checked") .each (function () {alert (jQuery (this). Val ());})

/ / Select all / deselect all

JQuery (function () {

JQuery ("# checkAll") .click (function () {

If (jQuery (this) .attr ("checked") = = true) {/ / Select all

JQuery ("input [type = checkbox] [name=checkbox]") .each (function () {

JQuery (this) .attr ("checked", true)

});

} else {/ / deselect all

JQuery ("input [type = checkbox] [name=checkbox]") .each (function () {

JQuery (this) .attr ("checked", false)

});

}

});

});

3. Select: drop-down box

HTML Code:

eleven

twenty-two

thirty-three

forty-four

fifty-five

sixty-six

Js operation code:

/ / add an event for Select, which is triggered when one of the items is selected

JQuery ("# select_id") .change (function () {})

/ / get the Value of the selected item in Select

Var checkValue = jQuery ("# select_id") .val ()

/ / get the Text of the selected item in Select

Var checkText = jQuery ("# select_id: selected") .text ()

/ / get the index value of the selected item in Select

Var checkIndex = jQuery ("# select_id") .attr ("selectedIndex")

/ / or

JQuery ("# select_id") .get (0) .selectedIndex

/ / 5. Get the largest index value of Select

Var maxIndex = jQuery ("# select_id: last") .attr ("index")

/ / or

JQuery ("# select_id: last"). Get (0) .index

/ / jQuery sets the selected item of Select

/ / Select items with a Select index value of 1.

JQuery ("# select_id") .get (0) .selectedIndex = 1

/ / Select the item with a value of 4 for Select

JQuery ("# select_id") .val (4)

/ / jQuery add / remove Option entry for Select

/ / append an Option (drop-down item) to Select

JQuery ("# select_id") .append ("add option")

/ / insert an Option for Select (first location)

JQuery ("# select_id") .prepend ("Please select")

/ / Delete the Option with an index value of 1 in Select (second)

JQuery ("# select_id") .get (0) .remove (1)

/ / Delete the maximum index value Option in Select (the last one)

JQuery ("# select_id: last") .remove ()

/ / Delete the Option of Value='3' in Select

JQuery ("# select_id [value='3']") .remove ()

/ / clear the drop-down list jQuery ("# select_id") .empty ()

The above is all the contents of the article "how jQuery operates radio, checkbox, select". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.