• 首页
• 域名注册
• 虚拟主机
• 网站建设
• 服务器租用
• 营销推广
• 网站程序
• 前端开发
• 移动互联网
• 企业邮箱

• 当前位置：创新互联 >> 常见问题 >> 前端开发 >> jQuery >> jQuery获取复选框被选中的个数及值

jQuery获取复选框被选中的个数及值

• 作者：创新互联 文章来源：前端开发部 点击数： 更新时间：2009-08-10
• 　　复选框是一个比较特殊的html插件，下面我来介绍在jquery中获取复选框被选中的个数及值一些实例方法，有需要了解的同学不防参考。
  获取复选框被选中值
   代码如下 复制代码
  <input type="button" id="btn5" value="获得选中的所有值">
  <input type="text" name="dd" id="dd" size="50" />
  $("#btn5").click(function(){
  var str="";
  $("[name='checkbox'][checked]").each(function(){
  str+=$(this).val()+",";
  })
  $("#dd").val(str)
  })
   
  JQuery获取被选中复选框checkbox的个数
  
  通过jQuery获取checkbox选中项的个数，需要用到jQuery的size()方法或length属性，下面的例子是通过length属性获得checkbox选中项的个数
  代码如下 复制代码
  <ol>
   
    <li><input type="checkbox" name="test" /> jquery获取checkbox选中1个数</li>
   
    <li><input type="checkbox" name="test" /> jquery获取checkbox选中2个数</li>
   
    <li><input type="checkbox" name="test" /> jquery获取checkbox选中3个数</li>
   
    <li><input type="checkbox" name="test" /> jquery获取checkbox选中4个数</li>
   
    <li><input type="checkbox" name="test" /> jquery获取checkbox选中5个数</li>
   
    <li><input type="checkbox" name="test" /> jquery获取checkbox选中6个数</li>
   
    <li><input type="checkbox" name="test" /> jquery获取checkbox选中7个数</li>
   
   </ol>
   
   <p><input type="button" id="count" value="有多少CheckBox被选中了？" />
   
   <script type="text/javascript">
    $(document).ready(function(){
    
     $('input[type=checkbox]').click(function(){
      $(this).attr('disabled','disabled');
      if($("input[name='test']:checked").length >= 3)
      {
       $("input[name='test']").attr('disabled','disabled');
      }
     });
    
     $("#count").click(function(){
      $('input').live('click',function(){
             alert($('input:checked').length);
         });
     })
    })
   </script> })
   })
  </script>
  
  上面我是把代码分开了，下面我们写成一个实例
   代码如下 复制代码
  <form action="" name="myform" id="myform" method="post">
          <input type="checkbox" name="id" value="1" /><br />
          <input type="checkbox" name="id" value="2" /><br />
          <input type="checkbox" name="id" value="3" /><br />
          <input type="button" value="提交" id="btn" />
      </form>
      <script type="text/javascript">
  
          $("#btn").click(function(){
              var id = $("input[name='id']:checked");
              var idvalue = id.val();//值
              var idl = id.length;//个数
              alert(idvalue);
               alert(idl);
          })
  </script>
  
• jQuery对象和DOM对象的区别 -创新互联 :上一篇
  jQuery绑定事件之live()、bind()方法介绍 :下一篇