jQuery操作checkbox步奏详解-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

jQuery操作checkbox步奏详解

Apr 19, 2018 pm 02:11 PM

jquery Penjelasan terperinci

这次给大家带来jQuery操作checkbox步奏详解，jQuery操作checkbox的注意事项有哪些，下面就是实战案例，一起来看一下。

对复选框组的全选、全不选、不全选，获取选中的复选框的值的操作

1.点击全选按钮，复选框组全部选中或者全部取消。
2.实现全选按钮和复选框组的联动，当复选框组中有一个没有被选中后，那么id=‘checkedAll'的全选按钮应该要取消选中；当复选框组全部选中后，全选按钮也应该被选中。
3.获取已选中的复选框的值。

代码：

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;title&gt;对复选框组的全选操作&lt;/title&gt;
  &lt;script src=&quot;http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
    $(function(){
      /*全选
      全选cheched和下方的checkbox按钮的checked是一致的，
      故可用this.checked。
      注意：$(this).checked是错的
      */
      $('#checkedAll').click(function() {
        $('[name=item]:checkbox').prop('checked', this.checked);
      });
      /*判断复选框的总数，是否和选中的复选框的数量相等
      相等：全选了
      不相等：没有全选
      */
      $('[name=item]:checkbox').click(function() {
        /*得到的是ul下 name=item 的复选框数组*/
        var $checkedArray = $('[name=item]:checkbox');
        /*$checkedArray.filter(':checked') -----&gt; 已经选择的复选框 */
        $('#checkedAll').prop('checked',$checkedArray.length==$checkedArray.filter(':checked').length);
            
      });
    });
  &lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
    $(function () {
      //获取已选的复选框的值
      var checkedArray = new Array();//放已经选择的checkbox的value
      var count;//已经选择的个数
      $('#btn_submit').click(function() {
        checkedArray.length=0;
        count=0;
        $('[name=item]:checkbox:checked').each(function() {
          checkedArray.push($(this).val());
          count++;
        });
        if (checkedArray.length==0) {
          alert("Please check one at least.");
          return;
        }
        confirm("已选复选框的值："+checkedArray+"\n"+"选中的复选框个数："+count);
      });
    })
  &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;form action=&quot;#&quot; method=&quot;POST&quot;&gt;
    &lt;input type=&quot;checkbox&quot; id=&quot;checkedAll&quot;&gt;&lt;label for=&quot;checkedAll&quot;&gt;全选&lt;/label&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;input type=&quot;checkbox&quot; name=&quot;item&quot; value=&quot;basketball&quot;&gt;篮球&lt;/li&gt;
      &lt;li&gt;&lt;input type=&quot;checkbox&quot; name=&quot;item&quot; value=&quot;football&quot;&gt;足球&lt;/li&gt;
      &lt;li&gt;&lt;input type=&quot;checkbox&quot; name=&quot;item&quot; value=&quot;badminton&quot;&gt;羽毛球&lt;/li&gt;
      &lt;li&gt;&lt;input type=&quot;checkbox&quot; name=&quot;item&quot; value=&quot;pingpong&quot;&gt;兵乓球&lt;/li&gt;
      &lt;li&gt;&lt;input type=&quot;checkbox&quot; name=&quot;item&quot; value=&quot;swimming&quot;&gt;游泳&lt;/li&gt;
      &lt;li&gt;&lt;input type=&quot;checkbox&quot; name=&quot;item&quot; value=&quot;running&quot;&gt;跑步&lt;/li&gt;
    &lt;/ul&gt;
    &lt;button type=&quot;button&quot; id=&quot;btn_submit&quot; value=&quot;提交button&quot;&gt;提交&lt;/button&gt;
  &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

Salin selepas log masuk

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！