• 【代码片段】jQuery测试表单过滤选择器


     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html>
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>第2章示例9</title>
     6 <style type="text/css">
     7     body { width:760px; }                                                                
     8     label,textarea,select { display:block; }
     9      textarea { width:560px; }
    10     div button { font:bold 16px/1 Arial,Helvetica,sans-serif; margin:1px 3px; padding:2px 0; cursor:pointer; width:165px; }
    11 </style>
    12 <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
    13 <script type="text/javascript">
    14     $(document).ready(function(){
    15         $("#btn1").click(function(){alert("可用的option元素有:"+$("option:enabled").length+"");});    
    16         $("#btn2").click(function(){alert("不可用的option元素有:"+$("option:disabled").length+"");});
    17         $("#btn3").click(function(){alert("被选中的input元素有:"+$("input:checked").length+"");});
    18         $("#btn4").click(function(){alert("被选中的option元素有:"+$(":selected").length+"");});                                    
    19     });
    20 </script>
    21 </head>
    22 <body>
    23     <form id="test">
    24     &lt;form id="test"&gt;<br/>
    25         <input type="hidden"/>
    26         <label><input type="text"/>&lt;input type="text"/&gt;</label>
    27         <label><input type="password"/>&lt;input type="password"/&gt;</label>
    28         <label><input type="file"/>&lt;input type="file"/&gt;</label>    
    29         <label><input type="image"/>&lt;input type="image"/&gt;</label>    
    30         <label><input type="radio" value="radio1" checked="checked"/>&lt;input type="radio" value="radio1" checked="checked"/&gt;</label>
    31         <label><input type="radio" value="radio2"/>&lt;input type="radio" value="radio2"/&gt;</label>
    32         <label><input type="radio" value="radio3"/>&lt;input type="radio" value="radio3"/&gt;</label>
    33         <label><input type="radio" value="radio4" disabled="disabled"/>&lt;input type="radio" value="radio4" disabled="disabled"/&gt;</label>
    34         <label><input type="checkbox" value="checkbox1" checked="checked"/>&lt;input type="checkbox" value="checkbox1" checked="checked"/&gt;</label>
    35         <label><input type="checkbox" value="checkbox2" checked="checked"/>&lt;input type="checkbox" value="checkbox2" checked="checked"/&gt;</label>
    36         <label><input type="checkbox" value="checkbox3"/>&lt;input type="checkbox" value="checkbox3"/&gt;</label>
    37         <label><input type="checkbox" value="checkbox4" disabled="disabled"/>&lt;input type="checkbox" value="checkbox4" disabled="disabled"/&gt;</label>
    38         <textarea disabled="disabled">&lt;textarea disabled="disabled"&gt;&lt;/textarea&gt;</textarea>
    39         &lt;select&gt;<br/>
    40         <select>        
    41             <option value="option1" selected="selected">&lt;option value="option1" selected="selected"&gt;&lt;/option&gt;</option>
    42             <option value="option2">&lt;option value="option2" selected="selected"&gt;&lt;/option&gt;</option>
    43             <option value="option3">&lt;option value="option3" selected="selected"&gt;&lt;/option&gt;</option>
    44             <option value="option4" disabled="disabled">&lt;option value="option4" selected="selected"&gt;&lt;/option&gt;</option>    
    45         </select>
    46         &lt;/select&gt;    <br/>
    47         &lt;select multiple="multiple"&gt;<br/>    
    48         <select multiple="multiple">        
    49             <option value="option1" selected="selected">&lt;option value="option1" selected="selected"&gt;&lt;/option&gt;</option>
    50             <option value="option2" selected="selected">&lt;option value="option2" selected="selected"&gt;&lt;/option&gt;</option>
    51             <option value="option3">&lt;option value="option3" selected="selected"&gt;&lt;/option&gt;</option>
    52             <option value="option4" disabled="disabled">&lt;option value="option4" selected="selected"&gt;&lt;/option&gt;</option>        
    53         </select>
    54         &lt;/select&gt;    <br/>
    55         <input type="button" value="&lt;input type=&quot;button&quot; value=&quot;**&quot;/&gt;"/><br />
    56         <input type="reset" value="&lt;input type=&quot;reset&quot; value=&quot;**&quot;/&gt;"/><br />
    57         <input type="submit" disabled="disabled" value="&lt;input type=&quot;submit&quot; value=&quot;**&quot; disabled=&quot;disabled&quot;/&gt;"/><br />
    58         <button type="button">&lt;button type="button"&gt;&lt;/button&gt;</button><br />    
    59         <button type="reset">&lt;button type="reset"&gt;&lt;/button&gt;</button><br />
    60         <button type="submit" disabled="disabled">&lt;button type="submit" disabled="disabled"&gt;&lt;/button&gt;</button><br/>
    61     &lt;/form&gt;
    62     </form>
    63     <div>
    64         <button type="button" id="btn1">$("option:enabled")</button>
    65         <button type="button" id="btn2">$("option:disabled")</button>
    66         <button type="button" id="btn3">$("input:checked")</button>
    67         <button type="button" id="btn4">$(":selected")</button>
    68     </div>
    69 </body>
    70 </html>

  • 相关阅读:
    上班5个月总结
    使用余弦定理计算两篇文章的相似性
    9月10日 小结
    软件测试
    《增长黑客》笔记
    统计学术语
    数据分析师:数据分析工作常见七种错误及其规避技巧(转自经管之家)
    输入一个日期,计算这个日期与 2018-03-12差多少天;
    求输入数字的阶乘 及加和 #s=1!+2!+3!+…..+n!
    列表去重
  • 原文地址:https://www.cnblogs.com/kojya/p/2944902.html
Copyright © 2020-2023  润新知