基于jQuery实现复选框的全选 全不选 反选功能
更新时间:2014年11月24日 14:49:52 投稿:hebedich
本文分享一段基于jQuery实现的复选框全选、全不选、反选功能的代码,有需要的小伙伴直接带走吧
本代码是在众多的jQuery复选框功能代码中精选出来的,本人项目中使用的代码,这里分享给大家。
jQuery代码:
复制代码 代码如下:
$(function(){
$("#checkedAll").click(function(){
$('[name=items]:checkbox').attr('checked',true);
});
$("#checkedNo").click(function(){
$('[name=items]:checkbox').attr('checked',false);
});
$("#checkedRev").click(function(){
$('[name=items]:checkbox').each(function(){
//$(this).attr('checked',!$(this).attr('checked'));
this.checked = !this.checked;
});
});
$("#send").click(function(){
var str = "你选中的是:\r\n";
$('[name=items]:checkbox:checked').each(function(){
str += $(this).val()+"\r\n";
});
alert(str);
});
});
HTML代码:
复制代码 代码如下:
你爱好的运动是?<br>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球<br>
<input type="button" id="checkedAll" value="全 选"/>
<input type="button" id="checkedNo" value="全不选"/>
<input type="button" id="checkedRev" value="反 选"/>
<input type="button" id="send" value="提 交"/>
小伙伴们使用起来是不是很方便,这也是本人千挑万选出来的,希望能对大家有所帮助。
您可能感兴趣的文章:
- jquery一键控制checkbox全选、反选或全不选
- jQuery对checkbox 复选框的全选全不选反选的操作
- jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
- jquery实现全选、不选、反选的两种方法
- jQuery实现全选、反选和不选功能
- 利用jQuery实现CheckBox全选/全不选/反选的简单代码
- JQuery选中checkbox方法代码实例(全选、反选、全不选)
- jquery全选/全不选/反选另一种实现方法(配合原生js)
- jquery 全选、全不选、反选效果的实现代码【推荐】
- 基于jquery实现复选框全选,反选,全不选等功能
- jQuery实现全选、反选和不选功能的方法详解
相关文章
javascript/jquery实现点击触发事件的方法分析
这篇文章主要介绍了javascript/jquery实现点击触发事件的方法,结合具体实例形式分析了JavaScript与jQuery针对点击按钮触发事件的相关实现与使用技巧,需要的朋友可以参考下2019-11-11jquery.lazyload 实现图片延迟加载jquery插件
看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验。减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery..2010-02-02poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
分享一个jquery插件-主要用于显示微博人的图像和鼠标提示等poshytip2012-10-10
最新评论