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的全选、反选和全不选的更多相关文章

  1. jquery中checkbox的选中,反选,全不选 注意1.6版本以上将attr改成prop

    <script type="text/javascript"> $(function () { // 全选 $("#btnCheckAll").bi ...

  2. js和jquery判断checkbox是否被选中

    js判断: if(document.getElementById("checkboxID").checked){ alert("checkbox is checked&q ...

  3. Android开发 ---基本UI组件5:监听下拉选项,动态绑定下拉选项、全选/反选,取多选按钮的值,长按事件,长按删除,适配器的使用,提示查询数据,activity控制多按钮

    效果图: 效果描述: 1.当点击 1 按钮后,进入选择城市的页面,会监听到你选中的城市名称:动态为Spinner绑定数据 2.当点击 2 按钮后,进入自动查询数据页面,只要输入首字母,就会动态查找以该 ...

  4. checkbox 全选反选实现全代码

    //跳转到指定action function validateForm(url){ if($("#form").form('validate')){ var x=document. ...

  5. 解决jquery操作checkbox全选全不选无法勾选问题

    最近在学习中使用jquery操作checkbox,使用下面方法进行全选.反选:$("input[name='checkbox']").attr("checked" ...

  6. JS实现全选与取消 Jquery判断checkbox是否被选中

    1.JS实现checkbox全选与取消 <body> <input type="checkbox" name="select_all"/> ...

  7. jquery、js操作checkbox全选反选

    全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...

  8. jquery、js全选反选checkbox

    操作checkbox,全选反选 //全选 function checkAll() { $('input[name="TheID"]').attr("checked&quo ...

  9. jquery实现checkbox全选和全部取消,以及获取值

    在后台管理中经常会遇到列表全选和取消的功能,如评论审核.申请等,用到的html标记就是checkbox.我用的是mysql数据库,代码如下: <!DOCTYPE html PUBLIC &quo ...

随机推荐

  1. 配置Log4j(非常具体)

    来自: http://www.blogjava.net/zJun/archive/2006/06/28/55511.html Log4J的配置文件(Configuration File)就是用来设置记 ...

  2. FlashBuilder精选插件

    1.Easy Explorer:打开在eclipse中选定文件所在的目录.这是一个非常不错的插件,有了它,你就可以随时跳到你指定文件的目录了.地址:http://sourceforge.net/pro ...

  3. Python_爬虫2

    URLError异常处理 大家好,本节在这里主要说的是URLError还有HTTPError,以及对它们的一些处理. 1.URLError 首先解释下URLError可能产生的原因: 网络无连接,即本 ...

  4. Spring与Struts整合

    Spring框架是一个非常优秀的轻量级Java EE容器,Spring框架是整个轻量级Java EE框架的核心.大部分的Java EE应用,都会考虑使用Spring容器管理应用中的组件,从而保证各组件 ...

  5. python(1) -文件操作

    很多时候我们需要对文件进行一些操作,比如读取并分析日志文件,写入日志文件等等.显然python也内置了对文件进行操作的函数. 读文件: >>> f = open('a.log','r ...

  6. linux安装gcc的一些问题。

    输入命令:yum install gcc 提示: Loaded plugins: fastestmirror, langpacksExisting lock /var/run/yum.pid: ano ...

  7. jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. html的标签中 unselectable=on 属性的作用

    在IE浏览器中,当input获得焦点时,点击有unselectable="on"属性的标签时,不会触发onblur事件. 加上该属性的元素不能被选中. < !DOCTYPE ...

  9. [设计模式]<<设计模式之禅>>模板方法模式

    1 辉煌工程——制造悍马 周三,9:00,我刚刚坐到位置上,打开电脑准备开始干活. “小三,小三,叫一下其他同事,到会议室开会”,老大跑过来吼,带着坏笑.还没等大家坐稳,老大就开讲了:“告诉大家一个好 ...

  10. win8.1恢复win7 CTRL+Space切换输入法

    win8用起来还是有很多好用的东西的,但是最让我受不了的就是输入法的切换,可以说是丧心病狂!!!折磨了我好久,今天终于找到了解决的办法! 那就是这位博客园的哥们给出的方案! http://www.cn ...