Jquery operation HTML control CheckBox, Radio, Select control

When writing foreground scripts using Javascript, it is often useful to manipulate Html controls, such as checkboxes, radio, select, and others in the Jquery Library, with a comprehensive code summary of the operations of these controls using JQ.

First, Jquery operation of the CheckBox:

<input id= "Ckb1" name= "ckb" checked= "checked" value= "0" type= "checkbox"/><span> Basketball </span><input Id= "Ckb2" name= "ckb" checked= "Checked" value= "1" type= "checkbox"/><span> Volleyball </span><input id= "Ckb3" Name= "ckb" disabled= "Disabled" value= "2" type= "checkbox"/><span> table tennis </span><input id= "Ckb4" Name= " CKB "disabled=" Disabled "value=" 3 "type=" checkbox "/><span> Badminton </span>

1. Find CONTROLS:

(1) Select all the checkbox controls:
Select by input type: $ ("Input[type=checkbox]") equivalent to $ ("Input:checkbox") in the document
Select by name: $ ("input[name=ckb]")

(2) Get the CheckBox control according to the index:
$ ("Input: checkbox: eq (1)")
Result returned: <input id= "Ckb2" name= "ckb" value= "1" type= "checkbox"/><span> Volleyball </span>

(3) Get all disabled checkbox controls:
$ ("Input[type=checkbox]:d isabled")
Results returned:
<input id= "Ckb3" name= "ckb" disabled= "Disabled" value= "2" type= "checkbox"/><span> table tennis </span>
<input id= "Ckb4" name= "ckb" disabled= "Disabled" value= "3" type= "checkbox"/><span> Badminton </span>

(4) Get all enabled checkbox controls
$ ("Input:checkbox[disabled=false]")
Results returned:
<input id= "Ckb1" name= "ckb" checked= "checked" value= "0" type= "checkbox"/><span> Basketball </span>
<input id= "Ckb2" name= "ckb" checked= "Checked" value= "1" type= "checkbox"/><span> Volleyball </span>

(5) Get all checked checkbox controls
$ ("input:checkbox:checked")
Results returned:
<input id= "Ckb1" name= "ckb" checked= "checked" value= "0" type= "checkbox"/><span> Basketball </span>
<input id= "Ckb2" name= "ckb" checked= "Checked" value= "1" type= "checkbox"/><span> Volleyball </span>

(6) Get all non-CHECKD checkbox controls
$ ("Input:checkbox:[checked=false]")
Results returned:
<input id= "Ckb3" name= "ckb" disabled= "Disabled" value= "2" type= "checkbox"/><span> table tennis </span>
<input id= "Ckb4" name= "ckb" disabled= "Disabled" value= "3" type= "checkbox"/><span> Badminton </span>

(7) Get a CheckBox control with value 0
$ ("input[type=checkbox][value=0]")
Results returned:
<input id= "Ckb1" name= "ckb" checked= "checked" value= "0" type= "checkbox"/><span> Basketball </span>

2. Disable:

(1) Disable all CheckBox controls:
$ ("Input:checkbox"). attr ("Disabled", true)

(2) Enable some disabled CheckBox controls:
$ ("input:checkbox:disabled"). attr ("disabled", false);

(3) Determine if the checkbox for value=0 is disabled:
if ($ ("input[name=ckb][value=0]"). attr ("disabled") = = True) {
Alert ("Not available");
}
else {
Alert ("Available");
}

3. Select:

(1) Select all:
$ ("Input:checkbox"). attr ("Checked", true);

(2) Select all:
$ ("Input:checkbox"). attr ("checked", false);

(3) Counter-election:
$ ("Input:checkbox"). each (function () {
if ($ (this). attr ("checked")) {
$ (this). Removeattr ("checked");
$ (this). attr ("checked", false);
}
else {
$ (this). attr ("Checked", true);
}
});

4. Value:    

function Getckboxvalues () {
var str= "";
$ ("input:checkbox:checked"). each (function () {
Switch ($ (this). Val ()) {
Case "0":
str + = "basketball,";
Break ;
Case "1":
str + = "Volleyball,";
Break ;
Case "2":
str + = "Table tennis,";
Break ;
Case "3":
str + = "Badminton,";
Break ;
     }
   });
str=str.substring (0, str.length-1)
  }

Ii. Jquery's operations on Radio:

<input name= "edu" value= "0" type= "Radio" checked= "checked"/><span> specialty </span><input name= "Edu" Value= "1" type= "Radio"/><span> undergraduate </span><input name= "edu" value= "2" type= "Radio" disabled= " Disabled "/><span> graduate </span><input name=" edu "value=" 3 "type=" Radio "disabled=" Disabled "/>< Span> PhD </span>

1. Find controls:

(1) Select all the radio controls
Select by input type
$ ("Input[type=radio]")//equivalent to $ ("Input:radio") in the document
Select by name
$ ("input[name=edu]")

(2) Get radio control based on index
$ ("Input:radio:eq (1)")
Results returned: <input name= "edu" value= "1" type= "Radio"/><span> undergraduate </span>

(3) Get all disabled Radio controls
$ ("input:radio:disabled")
Results returned:
<input name= "edu" value= "2" type= "Radio" disabled= "Disabled"/><span> graduate </span>
<input name= "edu" value= "3" type= "Radio" disabled= "Disabled"/><span> PhD </span>

(4) Get all enabled Radio controls
$ ("Input:radio[disabled=false]")
Results returned:
<input name= "edu" value= "0" type= "Radio" checked= "checked"/><span> Specialties </span>
<input name= "edu" value= "1" type= "Radio"/><span> undergraduate </span>

(4) RadioButton control to get checked
$ ("input:radio:checked")//equivalent to $ ("input[type=radio][checked]")
Results returned:
<input name= "edu" value= "0" type= "Radio" checked= "checked"/><span> Specialties </span>

(5) Get an checked RadioButton control
$ ("Input:radio[checked=false]"). attr ("Disabled", true);
Results returned:
<input name= "edu" value= "1" type= "Radio"/><span> undergraduate </span>
<input name= "edu" value= "2" type= "Radio" disabled= "Disabled"/><span> graduate </span>
<input name= "edu" value= "3" type= "Radio" disabled= "Disabled"/><span> PhD </span>

(6) Get value 0 RadioButton control
$ ("input[type=radio][value=0]")
Results returned: <input name= "edu" value= "0" type= "Radio" checked= "checked"/><span> Specialties </span>

2. Disable:

(1) Disable all radio
$ ("Input:radio"). attr ("Disabled", true);
or $ ("input[name=edu]"). attr ("Disabled", true);

(2) Disabling the radio control with index 1
$ ("Input:radio:eq (1)"). attr ("Disabled", true);

(3) Enable disabled radio controls
$ ("input:radio:disabled"). attr ("disabled", false);

(4) Disabling radio controls that are currently enabled
$ ("Input:radio[disabled=false]"). attr ("Disabled", true);

(5) Disabling the checked RadioButton control
$ ("input[type=radio][checked]"). attr ("Disabled", true);

(6) Disabling an checked RadioButton control
$ ("Input:[type=radio][checked=false]"). attr ("Disabled", true);

(7) Disable Value=0 's RadioButton
$ ("input[type=radio][value=0]"). attr ("Disabled", true);

3. Value:

$ ("input:radio:checked"). Val ()

4. Select:

(1) Determine if the Value=1 radio control is selected, unchecked:
var v = $ ("input:radio[value=1]"). attr ("checked");
if (!v) {
$ ("input:radio[value=1]"). attr ("Checked", true);
}

(2) Convert to an array of DOM elements to control the selection:
$ ("input:radio[name=edu]"). Get (1). checked = true;

Third, Jquery on the Select operation

<select id= "Cmbxgame" >   <option value= "0" selected= "selected" > Black Cat Sheriff </option>   <option Value= "1" disabled= "disabled" > Big head son </option>   <option value= "2" > Bear haunt </option>   < Option value= "3" > Pleasant goat </option></select>

1. Disable:

(1) Disable the Select control
$ ("select"). attr ("Disabled", true);

(2) Disable all option in select
$ ("select option"). attr ("Disabled", true);

(3) option to disable value=2
$ ("Select option[value=2]"). attr ("Disabled", true);

(4) Enable the disabled option
$ ("Select Option:disabled"). attr ("disabled", false);

2. Select:

(1) Option value of 2 is selected:
var v = $ ("Select option[value=2]"). attr ("selected");
if (!v) {
$ ("Select option[value=2]"). attr ("selected", true);
}

(2) Option item with index 2 selected
$ ("select") [0].selectedindex = 2;
or $ ("select"). Get (0). SelectedIndex = 2;
or $ ("Select option[index=2]"). attr ("selected", true);

3. Get the index of the selection:

(1) Get the selected item index: The Get function in JQ converts the JQ object to a DOM element
var selectindex = $ ("select"). Get (0). SelectedIndex;
or var Selectindex = $ ("Select Option:selected"). attr ("index");

(2) Get the index of the largest item:
var Maxindex = $ ("Select Option:last"). attr ("index")
or var Maxindex = $ ("select option"). length-1

4. Remove option from the Select control

(1) Clear all option
$ ("select option"). empty ();

(2) Delete value=2 option
$ ("Select option[value=2]"). Remove ();

(3) Delete the first option
$ ("Select Option[index=0]"). Remove ();

(4) Remove the option of text= "Bear infestation"
$ ("Select option[text= Bear Infestation]"). Remove (); Some browsers do not support this method instead of the following method

Note: You cannot use break with return false instead, continue replace with return true
$ ("select option"). each (function () {
if ($ (this). Text () = = "Bear Infestation") {
$ (this). Remove ();
return false;
}
});

5. Insert option in Select

(1) Insert option in the first place and select
$ ("select"). Prepend ("<option value= ' 0 ' > Please select </option>");
$ ("Select Option[index=0]"). attr ("selected", true);

(2) Insert option at the end position and select
$ ("select"). Append ("<option value=\" 5\ "> The Sea </option>");
var Maxindex = $ ("Select Option:last"). attr ("index")
$ ("Select option[index=" + Maxindex + "]"). attr ("selected", true);

(3) Insert a new option after inserting a fixed position, such as the first option, and select
$ ("<option value=\" 5\ "> InsertAfter (" "Select Option[index=0]");
or $ ("Select Option[index=0]"). After ("<option value=\" 5\ "> The Sea </option>");
$ ("Select Option[index=1]"). attr ("selected", true);

6. Value:

function getcbxselected () {
var v = $ ("Select Option:selected"). Val ();
var t = $ ("Select Option:selected"). Text ();
Alert ("Value:" + V + "text:" + t);
}

Jquery operation HTML control CheckBox, Radio, Select control