zoukankan      html  css  js  c++  java

  • jquery 操作 checkbox

    1. <script src="jquery-1.3.2.min.js"></script>   
    2.   <script type="text/javascript">   
    3.   
    4.   $(document).ready(function(){   
    5.       
    6.         
    7.              
    8.       //使用:checked选择器，来操作多选框.   
    9.         $("input[type=checkbox]").click(countChecked);   
    10.   
    11.         function countChecked() {   
    12.         var s = "";   
    13.         $("input[type=checkbox]:checked").each(function(){   
    14.                 s += $(this).val();   
    15.         });   
    16.           var n = $("input[type=checkbox]:checked").length;   
    17.           $("div").eq(0).html("<strong>有"+n+" 个被选中!</strong>"+"值："+s);   
    18.         }   
    19.   
    20.         countChecked();//进入页面就调用.   
    21.   
    22.      //使用:selected选择器，来操作下拉列表.   
    23.         $("select").change(function () {   
    24.               var str = "";   
    25.               $("select :selected").each(function () {   
    26.                     str += $(this).text() + ",";   
    27.               });   
    28.               $("div").eq(1).html("<strong>你选中的是："+str+"</strong>");   
    29.         }).trigger('change');   
    30.         // trigger('change') 在这里的意思是：   
    31.         // select加载后，马上执行onchange.   
    32.         // 也可以用.change()代替.   
    33.   });   
    34.   
    35.   
    36.   </script>  
    Java代码 复制代码
    1. <body>   
    2.   
    3.    <form id="form1" action="#">   
    4.        
    5.      多选框：<br/>   
    6.      <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1   
    7.      <input type="checkbox" name="newsletter" value="test2" />test2   
    8.      <input type="checkbox" name="newsletter" value="test3" />test3   
    9.      <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4   
    10.      <input type="checkbox" name="newsletter" value="test5" />test5   
    11.      <div></div>   
    12.   
    13.      <br/><br/>   
    14.      下拉列表1：<br/>   
    15.     <select name="test"  style="height:100px">   
    16.         <option>浙江</option>   
    17.         <option selected="selected">湖南</option>   
    18.         <option>北京</option>   
    19.         <option selected="selected">天津</option>   
    20.         <option>广州</option>   
    21.         <option>湖北</option>   
    22.     </select>   
    23.        
    24.      <br/><br/>   
    25.      下拉列表2：<br/>   
    26.      <select name="test2" >   
    27.     <option>浙江</option>   
    28.     <option>湖南</option>   
    29.     <option selected="selected">北京</option>   
    30.     <option>天津</option>   
    31.     <option>广州</option>   
    32.     <option>湖北</option>   
    33.     </select>   
    34.     <br/><br/>   
    35.   
    36.      <div></div>   
    37. </body>  
  • 相关阅读:
    轻松自动化---selenium-webdriver(python) (八)
    Ubuntu 18.04 LTS 启用 WakeOnLAN
    lower_bound 和 upper_bound
    [LeetCode 201.] Bitwise AND of Numbers Range
    [LeetCode 162.] Find Peak Element
    [LeetCode 33. 81. 153. 154.] 旋转数组中的二分查找
    C++ unordered_map 的一个疑问
    [LintCode 386.] 最多有k个不同字符的最长子字符串
    [LintCode 550.] 最常使用的K个单词II
    [LintCode 1029.] 寻找最便宜的航行旅途（最多经过k个中转站）
  • 原文地址：https://www.cnblogs.com/ggbbeyou/p/1588504.html
Copyright © 2011-2022 走看看