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. SQL SERVER NVARCHAR字段INSERT 中文乱码问题解决

    INSERT INTO IPatient ( UID, PatientNo, PatientName, PatientGender, Birthday, BloodType, Country, Nat ...

  2. 算法:排序----Java选择排序

    public static void selectionSort(int[] arr) { int len = arr.length; for (int i = 0; i < len; i++) ...

  3. osg 笔记一 (转)

    场景图形采用一种自顶向下的,分层的树状数据结构来组织空间数据集,以提高渲染的效率 场景图形树结构的顶部是一个根节点,从根节点向下延伸,各个组节点中均包含了几何信息和用于控制其外观的渲染状态信息.根节点 ...

  4. C++中使用union的几点思考(转)

    C++中使用union的几点思考 大卫注:这段时间整理旧资料,看到一些文章,虽然讲的都是些小问题,不大可能用到,但也算是一个知识点,特整理出来与大家共享.与此相关的那篇文章的作者的有些理解是错误的,我 ...

  5. Centos 6.5使用Bumblebee关闭N卡,冷却你的电脑

    夏天来了,笔记本装的Centos一直非常热.随着天气的变化,这个问题真的要攻克了.差了下原因可能是双显卡笔记本,N卡驱动不完好,导致风扇狂叫. 昨天安装了nvidia 的显卡驱动本以为时间安静了.但是 ...

  6. boost.asio源码剖析(一) ---- 前 言

    * 前言 源码之前,了无秘密.                                                       ——侯捷 Boost库是一个可移植.提供源代码的C++库,作 ...

  7. ABAP 日期时间函数(转)

    转自:http://www.sapjx.com/abap-datetime-function.html 函数名称 (内页-点击名称可查看操作) 函数说明 备注 FIMA_DATE_CREATE RP_ ...

  8. 根据Entity Framework6.X 数据生成代码(仅获取表名)

    近来学习ASP.NET MVC ,一直在看韩迎龙(Kencery)的ASP.NET MVC+EF框架+EasyUI实现权限管理.在第九节(TT模板的学习)卡住了,作者使用EF5.0做数据源,而我使用的 ...

  9. iOS开发基础知识:Core Animation(核心动画)

    Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍.也就是说,使用少量的代码就可以实现非常强大的功能. Core A ...

  10. Uva120 Stacks of Flapjacks 翻煎饼

    水水题.给出煎饼数列, 一次只能让第一个到第i个数列全部反转,要求把数列排序为升序. 算法点破后不值几钱... 只要想办法把最大的煎饼放到最后一个,然后就变成前面那些煎饼的数列的子题目了.递归或循环即 ...