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>  
posted @ 2009-10-23 10:00  ggbbeyou  阅读(220)  评论(0)  编辑  收藏  举报