The summary of jquery's Checkbox,radio,select operation method

The Checkbox,radio of jquery, and select, is a difficult and focused aspect of jquery operations, and many front-end novices don't understand it very well. A long time no, I am in the writing sometimes it is inevitable to some of the operation of the shuffle, remember not clearly, now, to do some simple summary!

1, CheckBox daily jquery operation.

Now let's take the following HTML as an example of 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 code:

<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 ();//Get the value of the check box for the specified ID
var isselected = $ ("#checkAll"). attr ("checked"); Determine if the check box for Id=checkall is selected, Isselected=true if it is selected, otherwise isselected=false;
$ ("#checkAll"). attr ("Checked", true);/or
$ ("#checkAll"). attr ("Checked", ' checked ');//Select the Id=checkbox_id3 check box to tick
$ ("#checkAll"). attr ("checked", false);/or
$ ("#checkAll"). attr ("Checked", "")//Will id=checkbox_id3 check box is not checked, that is, not tick
$ ("input[name=subbox][value=3]"). attr ("Checked", ' checked ');//Will Name=subbox, the value=3 check box is checked, that is tick
$ ("input[name=subbox][value=3]"). attr ("Checked", "");//Will Name=subbox, value=3 check box is not checked, that is not tick
$ ("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 () {//The check box is typically selected for more than one, so you can cycle through the selected values
Alert ($ (this). Val ());
});

2, Radio of jquery daily operation and attributes

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 choose.
In jquery, the radio check is the same as the checkbox.
$ ("#radio1"). attr ("Checked", "checked");
$ ("#radio1"). Removeattr ("checked");
$ ("input[type= ' Radio '][name= ' Radio ']:checked"). Length = = 0? "No single Marquee is 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");//Set 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 in the selected state ischecked = True, otherwise ischecked = false;
var ischecked = $ ("input[type= ' Radio '][name= ' Radio '][value= ' 2 ')"). attr ("checked");//value=2 an item in the 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 CheckBox and radio, and we still use the following HTML 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>

Look at the following properties for the select:

$ ("#select_id"). Change (function () {//1. Adds an event to a select that fires when one of the items is selected
Code ...
});
var CheckValue = $ ("#select_id"). Val (); 2. Gets the value of the 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 maximum index value for SELECT, or: $ ("#select_id: Last"). Getting (0). Index;
/**
* jquery Set Select items for select
*/
$ ("#select_id"). Get (0). SelectedIndex = 1; 1. Set the Select index value of 1 to check
$ ("#select_id"). Val (4); 2. Set the value of the select value of 4 to select
/**
* jquery Add/Remove option items for select
*/
$ ("#select_id"). Append ("<option value= ' Add ' > Add option</option>"); 1. Append an option to select (dropdown)
$ ("#select_id"). Prepend ("<option value=" Please select ' > Please choose </option> '); 2. Insert an option for select (first position)
$ ("#select_id"). Get (0). Remove (1); 3. Delete option with index value of 1 in select (second)
$ ("#select_id: Last"). Remove (); 4. Delete Maximum index value option in select (Last one)
$ ("#select_id [value= ' 3 ']"). Remove (); 5. Delete option value= ' 3 ' in select
$ ("#select_id"). empty ();

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

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

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

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

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

Sets the text selected by select, which can usually be used in select backfill
var numid=33//Set text==33 selected!
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 be to jquery Checkbox,radio and select have a certain understanding of it, warm so know new, with more will become skilled, even if sometimes forget, can also turn over!