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,转载请注明出处!
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。