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
