zoukankan      html  css  js  c++  java
  • jQuery 操作 input 之 checkbox

    jQuery 操作 input 之 checkbox 一片

    HTML 清单:

    <input type="checkbox" name="hobby" value="棒球"> 棒球
    <input type="checkbox" name="hobby" value="乒乓球"> 乒乓球
    <input type="checkbox" name="hobby" value="羽毛球"> 羽毛球
    <input type="checkbox" name="hobby" value="篮球"> 篮球
    <input type="checkbox" name="hobby" value="足球"> 足球
    <input type="checkbox" name="checkAll" value=""> 全选


    1、给每个 item 绑定事件:

    $("[name='hobby']:checkbox").on('click', function(){
        alert($(this).val());
    });

    2、获取选中的 item:

    $("[name='checkAll']:checkbox").on('click', function(){
        var val = '';
        $("[name='hobby']:checkbox").each(function(){
            if ($(this).attr('checked')) {
                val += $(this).val()+',';
            }
        });
        val = val.length > 0 ? val.substr(0, val.length-1) : '';
        alert(val);
    });

    3、全选/全不选

    //点击每个item触发
    $("[name='hobby']:checkbox").on('click', function(){
        var $items = $("[name='hobby']:checkbox");
        $("[name='checkAll']:checkbox").attr('checked', $items.length == $items.filter("[name='hobby']:checked").length);
    });
    
    //点击全选触发
    $("[name='checkAll']:checkbox").on('click', function(){
        $("[name='hobby']:checkbox").attr('checked', this.checked);
    });

    也许整理不断更新...

    本文来源于 CSDN,转载请注明出处。

    版权声明:本文博主原创文章,博客,未经同意不得转载。

  • 相关阅读:
    JUC学习
    java反射学习
    JSON入门学习
    redis
    NoSQ学习
    手写Lockl锁
    MapReduce过程
    scala学习
    idea jetty 配置
    java 基础--理论知识
  • 原文地址:https://www.cnblogs.com/lcchuguo/p/4886219.html
Copyright © 2011-2022 走看看