jQuery 操作 input 之 checkbox

来源：互联网发布：适合妈妈穿的淘宝店编辑：程序博客网时间：2024/06/05 12:06

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

2 0