jquery Select question

Source: Internet
Author: User

Select, check, drop-down list of all selected issues The basic idea is to find elements, manipulate elements, about how to look at jquery introduction, the main learning to remember the specific operation of the method check box select all and set selected issues:  jquery provides the Prop method, determines whether the check is selected, the return of the Boolean type Select all the idea is to find the element, set the selection. Set the selected idea to determine if the input value is equal to the value in the element, and the equality setting is selected. Example:<div> Select all: <input type= "checkbox"  id= "QX"  /></div><div> Panzhuang <input  type= "checkbox"  class= "ck"  value= "Panzhuang"  /> Torch Park <input type= "checkbox"  class= "CK"  value= "Torch Park"  /> zhongguancun <input type= "checkbox"  class= "ck"  value= "Zhongguancun"  /> People's Park <input type= "checkbox"  class= "ck"  value= "People's Park"  /> wangfujing <input type= " CheckBox " class=" ck " value=" Wangfujing " /></div><br /><div><input  Type= "button"  value= "Take checked value"  id= "btn"  /></div><br /><div> Please enter area:< Input type= "text"  id= "qy"  /><input type= "button"  value= "Settings Check"  id= "Szxz"  /> <script type= "Text/javascript" >$ (document). Ready (function (e)  {      $ ("#qx"). Click (function () {        //find the Select state of the All-selected button &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;VAR&NBSP;XZ  = $ (This). Prop ("checked");         // Turns the selected state of all check boxes in the check box list to the selected state of         $ (". ck"). Prop ("Checked", XZ);       })      $ ("#btn"). Click (function () {        var  ck = $ (". ck");         for (var i=0;i<ck.length;i++)         {            //ck[i]. Checked            if (Ck.eq (i). Prop ("checked"))             {                 alert (Ck.eq (i). Val ());             }         }        })       $ ("#szxz"). Click (function () {        //Gets the value entered by the user          var qy = $ ("#qy"). Val ();         //Set Check         var ck = $ (". CK");         ck.prop ("Checked", false);         for (var i=0;i<ck.length;i++)         {             if (Ck.eq (i). Val () ==qy)             {                 ck.eq (i). Prop ("checked", true);             }         }        })    });</script>  Select and set selected issues for single selection: Set check, first match input, in Settings check, $ (". a"). EQ (1). val) (): Get the jquery object by EQ, subscript get DOM Object Example:<div> Panzhuang <input type= "Radio"  name= "qy"  class= "ck"  value= "Panzhuang"  /> Torch Park <input type= "Radio"  name= "QY"   class= "CK"  value= "Torch Park"  /> zhongguancun <input type= "Radio"  name= "QY"  class= "CK"   Value= "Zhongguancun"  /> People's Park <input type= "Radio"  name= "QY"  class= "ck"  value= "People's Park"  / > Wangfujing <input type= "Radio"  name= "QY"  class= "ck"  value= "Wangfujing"  /></div>< Br /><div><input type= "button"  value= "Check value"  id= "BTN"  /></div>  <script type= "Text/javascript" >$ (document). Ready (function (e)  {    $ ( "#btn"). Click (function () {        var ck = $ (". ck");         for (var i=0; i<ck.length;i++)         {            if (Ck.eq (i). Prop ("checked"))             {                 Alert (Ck.eq (i). Val ());            }         }       )});</script>   the value and settings of the drop-down list are selected:   The idea is to find the element, get the value, match the value. Note: The drop-down list can also be an example of an element name, except for the selector: <select id= "qy" >    <option value= "1" > All </option>    <option value= "Panzhuang" > Panzhuang </option>     <option value= "Torch Park" > Torch Park </option>    <option value= "Zhongguancun" > Zhongguancun </option>    <option value= "People's Park" > People's Park </option>     <option value= "Wangfujing" > Wangfujing </option></select><input type= "button"  value= "Check value"  id= "btn"  /><br /><br /><div> Please enter value: <input type= "Text"  id= "Zhi"  /><input type= "button"  value= "Settings Check"  id= "Szxz"  /></div>  <script type= "Text/javascript" >$ (document). Ready (function (e)  {    $ ( "#btn"). Click (function () {        alert ($ ("#qy"). Val ()); &NBSP;&NBsp;  })      $ ("#szxz"). Click (function () {         var zhi = $ ("#zhi"). Val ();         var  op = $ ("option");         for (var i=0; i< op.length;i++)         {             //op.eq (i). Prop ("selected");             if ( Op.eq (i). Val ()  == zhi)             {                 op.eq (i). Prop ("selected", true);             }        }         $ ("#qy"). Val (zhi);     })});</script>  the problem of empty string when querying, remove the front and back space by trim () method Example:<div> Please enter the keyword: <input type= "text"  id= "key"  /></div><br /><input  type= "button"  value= "Query"  id= "BTN"  /><script>$ (document). Ready (function (e)  {      //space  !=  empty string  != null     $ ("#btn"). Click (function () {         var zhi = $ ("#key"). Val ( );          if (Zhi.trim ()  ==  "")          {            alert ("Check All");         }        else         {             alert ("according to conditions");        }          }) </script>  Write Div to implement the drop-down list to hide, check the explicit value : thinking; Find elements and click events, decide whether to hide, set hidden properties             Get the value of the selected element (this is the value of the current element). Show Example:<div  Id= "Xiala" >    <div id= "sel" > All </div>    <div  id= "List" >        <div class= "Node" > All </div>         <div class= "Node" > Panzhuang </div>         <div class= "Node" > Zhongguancun </div>         <div class= "Node" > Torch Park </div>        < div class= "Node" > People's Park </div>    </div></div><script type= "Text/javascript" >    //drop-down list     $ ("#sel"). Click (function () {         if ($ ("#list"). CSS ("display") = = "None")         {             $ ("#list"). CSS ("Display", "block");         }else {             $ ("#list"). CSS ("display", "none");        }          })     $ (". Node"). Click (function () {         var zhi = $ (This). Text ();         $ ("#sel"). Text (zhi),         $ ("#list"). CSS ("display" , "none");         })});</script>                     

JQuery selection Question

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.