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对象。

转载于:https://www.cnblogs.com/viola-sh/p/5458193.html

js及jQuery实现checkbox的全选、反选和全不选相关推荐

  1. 使用jq实现全选 反选 和全不选-冯浩的博客

    思路: 首先调用jq文件 当点击全选的时候我们让他全部为true 当点击全不选的时候我们让他全部为false 当点击反选的时候 使用echo循环遍历checked 使用 !取反: html部分< ...

  2. jquery获取checkbox选中的值

    jquery获取checkbox选中的值,包括全选 取消全选 反选 选中奇数行 获取选中的值 这里有一个注意点:使用attr(),会发现代码那里的checked="checked" ...

  3. Android Dialog实现全选反选

    Android的AlertDialog中可以通过builder.setMultiChoiceItems(....)来添加一个多选项,但是并不能实现对选项的全选/反选功能,所以需要自定义一个控件.原理是 ...

  4. js、jquery操作复选框checkbox总结(单个/多个获取选中值、初始化设置默认选中值、全选反选)

    一.单个复选框 使用label标签可以点击文字就能选中复选框或者是取消选择复选框 label标签的两种使用方法:   https://blog.csdn.net/qq_40015157/article ...

  5. JQuery 判断checkbox是否选中,checkbox全选,获取checkbox选中值

    2019独角兽企业重金招聘Python工程师标准>>> JQuery是一个非常容易上手的框架,但是有很多东西需要我们深入学习的. 判断checkbox是否被选中网上有选多种写法,这里 ...

  6. jQuery实现checkbox的全选反选方法

    checkbox的全选.取消全选.选中所有奇数.选中所有偶数等方法的实现代码如下: 注意jQuery的版本:jQuery1.6增加了prop,1.6之前的还是使用attr()和removeAttr() ...

  7. jQuery实现checkBox全选全取消

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jquery的attr和removeAttr实现checkbox全选和取消全选问题

    jquery的attr和removeAttr实现checkbox全选和取消全选问题 问题说明: 一个全选和取消全选的功能,界面效果图如下 点击全选checkbox则所有checkbox被选中或者取消选 ...

  9. jQuery如何动态删除TR,input按钮删除本行记录,checkbox全选反选

    checkbox 全选反选 1: var i = 1; 2: function CheckAllTeacher() { 3: if (i % 2 == 1) { 4: i++; 5: $(" ...

最新文章

  1. 游戏UI框架设计(三) : 窗体的层级管理
  2. python代码写完怎么运行-教你如何编写、保存与运行 Python 程序
  3. CVPR2019目标检测方法进展综述
  4. Spring MVC静态资源处理
  5. 温故(2):pass by value
  6. MyBatis 插件原理与自定义插件-插件编写与注册
  7. Techo 大会:AI 会替代 DBA 么?
  8. 计算机基础,你知道蓝屏的原因吗
  9. AntDesign组件库的使用
  10. 蓝盾小火墙补丁_网络安全知识小科普
  11. 怎样搞定机器学习里的数学?斯坦福高手教你具体问题具体分析
  12. JSLint说“缺少基数参数”
  13. Logstash配置方法
  14. 关于怕什么来什么的说法,是否成立
  15. Python + vs +Opencv
  16. 【译】2018 年前端开发回顾
  17. Eclipse 快捷键设置
  18. 彻底搞懂CNN中的卷积和反卷积
  19. 三种振幅调制AM、DSB、SSB
  20. 这些天学C++到学ROS,都感觉视频教程效果好些。效率也高些,相比于单自己看书而言。

热门文章

  1. python可以干嘛用-Python可以被用来做哪些神奇好玩的事情
  2. 学python可以干嘛-学 Python 都用来干嘛的?
  3. python中语法错误-Python3 错误和异常
  4. python就业方向选择-【经验分享】Python最好的几大就业方向与岗位技能要求!
  5. python3.6安装pygame-Pygame 框架安装教程(Python3.6为例)
  6. python怎么用excel-Python使用xlwt模块操作Excel的方法详解
  7. python写乘法口诀-如何用python编写乘法口诀表
  8. python面试常见问题-Python面试中最常见的25个问题
  9. python绘制3d图-python中Matplotlib实现绘制3D图的示例代码
  10. 学python最好的方式-Python 学习怎样开始比较好?