js及jQuery实现checkbox的全选、反选和全不选
html代码:
<label><input type="checkbox" id="all"/>全选</label>
<label><input type="checkbox" id="other"/>反选</label>
<label><input type="checkbox" id="none"/>不选</label> <input type="checkbox" value="1" name="check" checked/>
<input type="checkbox" value="2" name="check"/>
<input type="checkbox" value="3" name="check" checked/>
js实现:
window.onload = function(){
var all = document.getElementById('all');
var other = document.getElementById('other');
var none = document.getElementById('none');
var arr = new Array();
var items = document.getElementsByName('check');
all.onclick = function(){
for(var i = 0;i<items.length;i++){
items[i].checked = true;
}
}
other.onclick = function(){
for(var i = 0; i< items.length; i++){
if(items[i].checked){
items[i].checked = false;
}
else{
items[i].checked = true;
}
}
}
none.onclick = function(){
for(var i = 0;i < items.length ;i++){
items[i].checked = false;
}
}
}
jQuery实现:
$(function(){
$("#all").click(function(){
$("input[name='check']").each(function(){
this.checked = true;
})
})
$("#other").click(function(){
$("input[name='check']").each(function(){
this.checked = !this.checked;
})
});
$("#none").click(function(){
$("input[name='check']").each(function(){
this.checked = false;
})
})
});
jQuery的实现,一开始写成了$(this)以attr()更改checked属性的方式,如下:
$(function(){
$("#all").click(function(){
$("input[name='check']").each(function(){
$(this).attr({checked:true});
})
})
$("#other").click(function(){
$("input[name='check']").each(function(){
$(this).attr({checked:!this.checked});
})
});
$("#none").click(function(){
$("input[name='check']").each(function(){
$(this).attr({checked:false});
})
})
});
这种写法在点击了反选或者不选之后,全选和反选都不能正常实现功能。
调用的jQuery版本为jquery-1.11.3.js。查看了jQuery的参考手册,each()中,使用this,指代的是DOM对象,使用$(this)指代的是jQuery对象。
js及jQuery实现checkbox的全选、反选和全不选的更多相关文章
- jquery中checkbox的选中,反选,全不选 注意1.6版本以上将attr改成prop
<script type="text/javascript"> $(function () { // 全选 $("#btnCheckAll").bi ...
- js和jquery判断checkbox是否被选中
js判断: if(document.getElementById("checkboxID").checked){ alert("checkbox is checked&q ...
- Android开发 ---基本UI组件5:监听下拉选项,动态绑定下拉选项、全选/反选,取多选按钮的值,长按事件,长按删除,适配器的使用,提示查询数据,activity控制多按钮
效果图: 效果描述: 1.当点击 1 按钮后,进入选择城市的页面,会监听到你选中的城市名称:动态为Spinner绑定数据 2.当点击 2 按钮后,进入自动查询数据页面,只要输入首字母,就会动态查找以该 ...
- checkbox 全选反选实现全代码
//跳转到指定action function validateForm(url){ if($("#form").form('validate')){ var x=document. ...
- 解决jquery操作checkbox全选全不选无法勾选问题
最近在学习中使用jquery操作checkbox,使用下面方法进行全选.反选:$("input[name='checkbox']").attr("checked" ...
- JS实现全选与取消 Jquery判断checkbox是否被选中
1.JS实现checkbox全选与取消 <body> <input type="checkbox" name="select_all"/> ...
- jquery、js操作checkbox全选反选
全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...
- jquery、js全选反选checkbox
操作checkbox,全选反选 //全选 function checkAll() { $('input[name="TheID"]').attr("checked&quo ...
- jquery实现checkbox全选和全部取消,以及获取值
在后台管理中经常会遇到列表全选和取消的功能,如评论审核.申请等,用到的html标记就是checkbox.我用的是mysql数据库,代码如下: <!DOCTYPE html PUBLIC &quo ...
随机推荐
- DuiLib(三)——控件消息
上一篇讲了控件创建,这篇说说控件消息.directui的中心思想是在真实窗口之上画出所有控件,那这些控件是如何获取各自消息的? 通过第一篇的示例可以看到窗口消息的传递过程: CWindowWnd::_ ...
- MyBatis之七:使用generator工具
可以将mybatis理解成一种半自动化orm框架,通过注解或者配置xml映射文件来手写相关sql语句,不能像我之前介绍orm的文章那样全对象化操作数据库增删改查.其实你会发现,手写配置xml映射文件是 ...
- delphi label1 文字在窗体上水平来回移动
//文字在窗体上水平来回移动 procedure TForm1.Timer1Timer(Sender: TObject);{ Timer1.Interval:=10;}begin if label1 ...
- Android PhoneGap源码分析——白名单
对于单独的Web app应用来说,加载进来的url一般不能保证它的安全性.那么如何来处理url安全性的问题呢. 让我们来看看PhoneGap是如何做的. PhoneGap采用了白名单的形式,认为在白名 ...
- 粒子系统1:简介&工具使用
直接使用工具来感受一下粒子系统的强大威力吧. 网络上有很多粒子编辑器,大多数都是收费的.magicalsoft提供了一个免费的粒子编辑器(该工具目前只有mac版本),界面如下: 我们将针对这个编辑器来 ...
- Linux内核加载全流程
无论是Linux还是Windows,在加电后的第一步都是先运行BIOS(Basic Input/Output System)程序——不知道是不是所以的电脑系统都是如此.BIOS保存在主板上的一个non ...
- vim中光标的前进和后退
流行的文本编辑器通常都有前进和后退功能,可以在文件中曾经浏览过的位置之间来回移动.在 vim 中使用 Ctrl-O 执行后退,使用 Ctrl-I 执行前进.相关帮助: :help CTRL-O :h ...
- And Then There Was One
http://poj.org/problem?id=3517 And Then There Was One Time Limit: 5000MS Memory Limit: 65536K Tota ...
- 配置hibernate例子
一.hiberbate.cfg.xml <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE hib ...
- SqlServer之游标深入
原创文章,转载必需注明出处:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/introduce-for-sqlserver-curs ...