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

转载于:https://www.cnblogs.com/lcchuguo/p/4886219.html

jQuery 操作 input 之 checkbox相关推荐

ajax实现多选 radio true,jQuery操作radio、checkbox、select的方法总结
jQuery操作radio.checkbox.select的方法总结发布于 2015-05-21 06:55:26 | 253 次阅读 | 评论: 0 | 来源: 网友投递 jQuery javas ...
jQuery操作input
获取选中的值获取一组radio被选中项的值var item = $('input[@name=items][@checked]').val(); 获取select被选中项的文本 var item = ...
使用jQuery操作input的value值
表单控件是jQuery的重中之重,因为一旦牵扯到数据交互,就离不开form表单的使用,比如用户的登录注册功能等. 在进行操作input的value值的时候,主要使用jQuery的val()方法. 点击 ...
jQuery操作radio、checkbox、select总结
本文转自:http://tiame.iteye.com/blog/1493261 1.radio:单选框 HTML代码: Html代码 <input type="radio&quo ...
jQuery操作radio、checkbox、select 集合
1.radio:单选框 HTML代码: <input type="radio" name="radio" id="radio1" va ...
jquery 操作 input显示或者隐藏
<input id="hfl" name="hfl" style="display:none"> 通过jquery操作来控制隐藏 ...
jQuery中Input属性checkBox用removeAttr后无效的陷阱
2019独角兽企业重金招聘Python工程师标准>>> 最近在做项目中,前台页面上有很多个checkBox,要根据条件来判断,哪些选中,哪些移除选中效果. 发现checkBox在使用 ...
jquery实用应用之jquery操作radio、checkbox、select
本文收集一些jquery的实用技巧,非常实用的哦,其中对radio.checkbox.select选中与取值的方法. 获取一组radio被选中项的值 var item = $('input[@name ...
关Jquery判断input type=checkbox元素是否被选中的判断
2019独角兽企业重金招聘Python工程师标准>>> 在用到复选框的时候,想在js中判断chekbox是否被选中 <input name="isPermit&quo ...

jQuery 操作 input 之 checkbox

jQuery 操作 input 之 checkbox相关推荐

最新文章

热门文章