The Checkbox,radio,select of jquery and other methods summary _jquery

Source: Internet
Author: User

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 <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 checkbox for the specified ID 
var isselected = $ ("#checkAll"). attr ("checked");//Judge id= Checkall check box is selected, select Isselected=true; otherwise isselected=false; 
$ ("#checkAll"). attr ("Checked", true);/or 
$ ("#checkAll"). attr ("Checked", ' checked ');/Will Id=checkbox_ ID3 check box is selected, that is, tick 
$ ("#checkAll"). attr ("checked", false);/or 
$ ("#checkAll"). attr ("Checked", "");//Will id= CHECKBOX_ID3 check box is not selected, that is, do not tick 
$ ("input[name=subbox][value=3]"). attr ("Checked", ' checked ');/will Name=subbox, value =3 check box is selected, that is, tick 
$ ("input[name=subbox][value=3]"). attr ("Checked", "");//Will Name=subbox, value=3 the checkbox 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 () {//Because the check box is generally selected for more than one, you can loop out the selected value 
  alert ($ (this). Val ()); 

2, Radio jquery day-to-day operations and attributes we still use 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 

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 = One of the 2 items is selected 
$ ("#radio2"). attr ("Checked", "checked");//Set Id=radio2 to select 
$ ("input[type= ' Radio '][name= ', '", "N ' 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; 

3. The daily jquery operation of the Select dropdown box is relatively cumbersome compared to checkboxes 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> 

Look at the following properties for the select:

 $ ("#select_id"). Change (function () {//1. Add an event to a select, triggering//code when one of the items is selected);          var CheckValue = $ ("#select_id"). Val ();     2. Gets the value var Checktext = $ ("#select_id: Selected") for the Select Check. text ();  3. Gets the text var CheckIndex = $ ("#select_id") of the Select selected item. 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 Sets the selected item for select/$ ("#select_id"). Get (0). SelectedIndex = 1;                  1. Set the Select index value of 1 to select $ ("#select_id"). Val (4); 2. Items with a value of 4 for select/** * jquery Add/Remove Select option/$ ("#select_id"). Append ("<option value= ' Add ' &  gt; add option</option> ");  1. Append an option (Drop-down) $ ("#select_id") to select. Prepend ("<option value=" Please select ' > Please choose </option> ');                   2. Insert an option (first position) $ ("#select_id") for the Select. Get (0). Remove (1); //3. Delete option (second) $ ("#select_id: Last") with index value of 1 in Select. Remove ();                 4. Delete Maximum index value option (last) $ ("#select_id [value= ' 3 ']" in Select). Remove ();       

  5. Delete option $ ("#select_id") for value= ' 3 ' in Select. Empty (); $ ("#select_id"). Find ("option:selected"). Text (); Gets the text: $ ("#select_id") selected by select. Val (); Gets the value: $ ("#select_id") selected by Select. Get (0). SelectedIndex; Gets the index selected by select: $ ("#select_id"). Get (0). Selectedindex=index;//index sets the Select selected value: $ ("#select_id") for index//. attr
  ("Value", "Normal");
  $ ("#select_id"). Val ("Normal");

 $ ("#select_id"). Get (0). value = value;
Set Select selected text, you can usually use var numid=33//Set text==33 selection in Select Backfill!
 var count=$ ("#select_id option"). Length; for (Var i=0;i<count;i++) {if ($ ("#select_id"). Get (0). Options[i].text = = Numid) {$ ("#select_id"). G 
      ET (0). options[i].selected = true; 
    Break } 
  }

Through the above summary, should be the 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!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.