jQuery 操作 input 之 checkboxjquery

/ / 2016-10-10 阅读：2496

jQuery 操作 input 之 checkbox 篇 HTML 代码清单： <input type="checkbox" name="hobby" value="棒球"> 棒球 <input type="checkbox" name="hobby" value="乒乓球"> 乒乓球 <i...

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);
});

上一篇：jQuery 的各种选择器

下一篇：jQuery 网页选项卡

阅读延展

jQuery 操作 input 之 checkboxjquery

我要评论

最新评论