jquery Common operations: CheckBox, select Value, Radio, checkbox, select Select and its related

Source: Internet
Author: User

Common jquery operations: CheckBox value, select Value, Radio check, checkbox check, select Select, and Related:

1. Shadow page elements

Using jquery is really handy, for example, to control the display and hiding of Div, in a word, take a look at the instructions below.  $ ("#id"). Show () represents Display:block,  $ ("#id"). Hide () indicates display:none;  $ ("#id"). Toggle () Toggles the visible state of the element. If the element is visible, toggle to hidden, or toggle to visible if the element is hidden.    $ ("#id"). CSS (' Display ', ' none ');  $ ("#id"). CSS (' Display ', ' block ');  or  $ ("#id") [0].style.display = ' none ';    $ ("#id") returns jquery  It's a collection definitely no display property  


2, judge whether the page element is hidden

<script>$ (document). Ready (function () {var temp=$ (' #test '). Is (": hidden");//Whether to hide vartemp1=$ ("#test"). Is (": Visible ");//whether the alert (temp); alert (TEMP1);}); </script>


3. Find the specified element

$ ("#id"). Find ("#child");//Based on id$ ("#id"). Find (". Child");//According to class$ ("#id"). Find ("input[type= ' image ']"); /By Type
$ ("Div ul Li:first"). Get ()//According to label

4. Eachuse

<script type= "Text/javascript" >   $ (document). Ready (function () {   //$ ("ul"). Find ("Li"). i) {    $ ("#orderedlist"). Find ("Li"). (function (i) {     $ (this). HTML ($ (this). html ();    });   });   
5,jquery radio value, checkbox value, select Value, Radio selected, CheckBox selected, select selected, and its related

 $ ("[name= ' checkbox ']"). attr ("Checked", ' true ');//Select All $ ("[name= ' checkbox ']"). Removeattr ("checked");//  Deselect the value of the Radio radio button for all jquery ("input[name= ' Items ']:checked"). Val (); Another: Determines whether radio is selected and gets the selected value as follows: Function Checkradio () {var item = $ (": radio:checked"); var len=item.length; if (len>0) {al ERT ("yes--selected value is:" +$ (": radio:checked"). Val ());     }} Gets a set of radio values for the selected item var item = $ (' input[name=items][checked] '). Val ();     Gets the text of the Select selected item var item = $ ("Select[name=items] option[selected]"). Text ();     The second element of the Select drop-down box is the currently selected value $ (' #select_id ') [0].selectedindex = 1;         Radio the second element of a radio group is the currently selected value $ (' input[name=items] '). Get (1). checked = true; Gets the value: text box, text area: $ ("#txt"). attr ("value"), Multi-marquee checkbox:$ ("#checkbox_id"). attr ("value"), Radio Group Radio: $ ("Input[type     =radio][checked] "). Val ();          Drop-down box select: $ (' #sel '). Val (); Control form elements: text box, text area: $ ("#txt"). attr ("Value", "");//Empty contents $ ("#txt"). attr ("value", ' 11 ');//Fill Content Multi Marquee checkbox: $ ("#chk1 "). attr (" Checked ",");//Do not tick $ ("#chk2"). atTR ("Checked", true);//Tick if ($ ("#chk1"). attr (' checked ') ==undefined)//Determine if the radio group has been ticked radio: $ ("Input[type=radio]") . attr ("Checked", ' 2 ');//Set value=2 items as the current Check drop-down box select: $ ("#sel"). attr ("value", '-sel3 ');//Set VALUE=-SEL3 item as the currently selected $ (" <option value= ' 1 ' >1111</option><option value= ' 2 ' >2222</option> "). AppendTo (" #sel ")// Add the option $ ("#sel") to the drop-down box. empty ();//emptying the drop-down box just beginning to touch jquery, a lot of things are not familiar with $ ("#id") to get the page INPUT element, found $ ("#id"). Value cannot be taken to    Value later finally, with the help of the great Baidu, found the cause of the problem: $ ("") is a jquery object, not a DOM element value is the property of DOM element jquery corresponds to the Val    Val (): Gets the current value of the first matching element.     Val (val): Sets the value of each matching element.    So, the code should read: val = $ ("#id") [0].value;     Assignment: $ ("#id") [0].value = "New value";    or $ ("#id"). Val ("new value");   Or it can be: val = $ ("#id"). attr ("value"); Each of these is very useful in jquery, and it replaces JavaScript for loops, for example, in a function that has a each, and in each case a certain condition, the function returns TRUE or FALSE function MethodOne () {.... $.each (Array,function () {if (condition is set) {return true;}});The results found that it was always wrong. Later find data only found that in each code block can not use break and continue, to achieve the function of break and continue, to use the other way to break----with return false;  Continue--with return ture; So when I want to use return true to return to this function in each, I just let each continue execution and even if each is not interrupted, so the function can not return the other: Determine whether Radio is selected and get the selected value as follows: function Checkradio () {var item = $ (": radio:checked"), Var len=item.length, if (len>0) {alert ("yes--checked Value:" +$ (": Radio : Checked "). Val ());  } }


jquery Common operations: CheckBox, select Value, Radio, checkbox, select Select and its related

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.