jQuery 操作 input 之 checkbox

最新推荐文章于 2023-12-13 15:32:43 发布

ruxingli

最新推荐文章于 2023-12-13 15:32:43 发布

阅读量1.4w

点赞数 2

分类专栏：点滴jQuery 文章标签： jquery checkbox

本文链接：https://blog.csdn.net/liruxing1715/article/details/37511087

版权

点滴jQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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，转载请注明出处！