A summary of Checkbox,radio,select and other methods of jquery

jquery's Checkbox,radio, and select are a difficult and important point for jquery operations, and many front-end novices are not very thorough about it. Long time no, I write sometimes also unavoidably on some operations, remember not clear, now, do some simple summary!
1, CheckBox daily jquery operation.

Now let's use the following HTML as an example for the checkbox operation.

<input id= "Checkall" type= "checkbox"/> Select all
<input name= "Subbox" type= "checkbox"/> Item 1
<input name= "Subbox" type= "checkbox"/> Item 2
<input name= "Subbox" type= "checkbox"/> Item 3
<input name= "Subbox" type= "checkbox"/> Item 4

Select all and select all codes:

<script type= "Text/javascript" >
$ (function () {
$ ("#checkAll"). Click (function () {
$ (' input[name= ' Subbox "]). attr (" Checked ", this.checked);
});
var $subBox = $ ("input[name= ' Subbox ')";
$subBox. Click (function () {
$ ("#checkAll"). attr ("Checked", $subBox. Length = = $ ("input[name= ' Subbox ']:checked"). length? true:false);
});
});
</script>

CheckBox Properties:

var val = $ ("#checkAll"). Val ();//Gets the value of the check box for the specified ID
var isSelected = $ ("#checkAll"). attr ("checked"); Determine if the Id=checkall check box is selected, isselected=true; otherwise isselected=false;
$ ("#checkAll"). attr ("Checked", true);//or
$ ("#checkAll"). attr ("Checked", ' checked ');//Select the check box for ID=CHECKBOX_ID3, tick
$ ("#checkAll"). attr ("checked", false);//or
$ ("#checkAll"). attr ("Checked", "");//the check box for ID=CHECKBOX_ID3 is not checked, that is, no tick
$ ("input[name=subbox][value=3]"). attr ("Checked", ' checked ');//Will Name=subbox, value=3 the check box selected, tick
$ ("input[name=subbox][value=3]"). attr ("Checked", "");//Will Name=subbox, value=3 the check box is not selected, that is not ticked
$ ("Input[type=checkbox][name=subbox]"). Get (2). checked = true;//Set index = 2, that is, the third item is selected
$ ("input[type=checkbox]:checked"). each (function () {///Because the check box is generally selected for more than one, you can cycle through the selected values
Alert (This). Val ());
});

2. Radio's jquery daily operations and properties

We still take the following HTML as an example:

<input type= "Radio" name= "Radio" id= "Radio1" value= "1"/>1
<input type= "Radio" name= "Radio" id= "Radio2" value= "2"/>2
<input type= "Radio" name= "Radio" id= "Radio3" value= "3"/>3
<input type= "Radio" name= "Radio" id= "Radio4" value= "4"/>4

The radio operation is as follows:

$ ("Input[name=radio]:eq (0)"). attr ("Checked", ' checked '); This is the first one to be selected.
In jquery, the selection of radio is the same as the checkbox.
$ ("#radio1"). attr ("Checked", "checked");
$ ("#radio1"). Removeattr ("checked");
$ ("input[type= ' Radio '][name= ' Radio ']:checked"). Length = = 0? "No single Box selected": "Already selected";
$ (' input[type= ' Radio "][name=" Radio "]:checked '). Val (); Gets the value of a set of radio selected items
$ ("input[type= ' Radio '][name= ' Radio '][value= ' 2 ']"). attr ("Checked", "checked");//Setting value = 2 is selected
$ ("#radio2"). attr ("Checked", "checked"); Set one of the Id=radio2 to be selected
$ ("input[type= ' Radio '][name= ' Radio ']"). Get (1). checked = true; Set index = 1, that is, the second item is currently selected
var isChecked = $ ("#radio2"). attr ("checked");//Id=radio2 an item is selected isChecked = True, otherwise isChecked = false;
var isChecked = $ ("input[type= ' Radio '][name= ' Radio '][value= ' 2 ']"). attr ("checked");//value=2 a selected state isChecked = True, otherwise ischecked = false;

3. The daily jquery operation of the Select dropdown box

The select operation is relatively cumbersome compared to the checkbox and radio, and we still use the following HTML as an example to illustrate:

<select name= "Select" id= "select_id" style= "width:100px;" >
<option value= "1" >11</option>
<option value= "2" >22</option>
<option value= "3" >33</option>
<option value= "4" >44</option>
<option value= "5" >55</option>
<option value= "6" >66</option>
</select>

See the following properties for select:

$ ("#select_id"). Change (function () {//1. Add an event for Select to trigger when one of the items is selected
Code ...
});
var CheckValue = $ ("#select_id"). Val (); 2. Get the value of select selected item
var Checktext = $ ("#select_id: Selected"). Text (); 3. Gets the text of the Select selected item
var CheckIndex = $ ("#select_id"). attr ("SelectedIndex"); 4. Gets the index value of the Select selected item, or: $ ("#select_id"). Get (0). SelectedIndex;
var Maxindex = $ ("#select_id: Last"). attr ("index"); 5. Get the Select Maximum index value, or: $ ("#select_id: Last"). Get (0). Index;
/**
* jquery Set Select for Select
*/
$ ("#select_id"). Get (0). SelectedIndex = 1; 1. Set the Select index value to 1 to select
$ ("#select_id"). Val (4); 2. Set the Select value to 4 for the item selected
/**
* jquery Add/Remove option item for select
*/
$ ("#select_id"). Append ("<option value= ' new ' > New option</option>"); 1. Append an option to the Select (drop-down item)
$ ("#select_id"). Prepend ("<option value= ' Please select ' > Please select </option> '); 2. Insert an option for select (first position)
$ ("#select_id"). Get (0). Remove (1); 3. Delete option with index value 1 in select (second)
$ ("#select_id: Last"). Remove (); 4. Delete the index value in select maximum option (last)
$ ("#select_id [value= ' 3 ']"). Remove (); 5. Delete option for value= ' 3 ' in select
$ ("#select_id"). empty ();

$ ("#select_id"). Find ("option:selected"). Text (); Gets the text selected by the Select:

$ ("#select_id"). Val (); Gets the value selected by select:

$ ("#select_id"). Get (0). SelectedIndex; Gets the index selected by the select:

$ ("#select_id"). Get (0). Selectedindex=index;//index as index value

Set the value selected by select:
$ ("#select_id"). attr ("value", "Normal");
$ ("#select_id"). Val ("Normal");
$ ("#select_id"). Get (0). value = value;

Set Select selected text, which can usually be used in a select backfill
var numid=33//Set text==33 check!
var count=$ ("#select_id option"). Length;
for (Var i=0;i<count;i++)
{if ($ ("#select_id"). Get (0). Options[i].text = = numId)
{
$ ("#select_id"). Get (0). options[i].selected = true;
Break
}
}

Through the above summary, should have a certain understanding of the Checkbox,radio and select of jquery, it is known that the new, with more will become proficient, even if sometimes forget, can also be turned over!

A summary of Checkbox,radio,select and other methods of jquery