DOM操作复选框

实现一个效果如下图:

点击"全选/全不选"复选框之后，足球、篮球、游泳和唱歌均被选取。取消"全选/全不选"复选框之后，被选中的所有都变成未选中。点击"全选"按钮之后，
足球、篮球、游泳和唱歌均被选取，点击"全不选"之后，被选中的所有都变成未选中。点击反选之后，未选中的变成选中的，选中的变成未选中的。

下面我们来实现这个效果。
源代码:

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    2. <html>
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    5. <title>js测试</title>
    6. </head>
    7. <body>
    8. 您的爱好很广泛!!!
    9. <br>
    10. <input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选"/>全选/全不选
    11. <br>
    12. <input type="checkbox" name="items" value="足球" />足球
    13. <input type="checkbox" name="items" value="篮球"/>篮球
    14. <input type="checkbox" name="items" value="游泳"/>游泳
    15. <input type="checkbox" name="items" value="唱歌"/>唱歌
    16. <br>
    17. <input type="button" name="checkall" id="checkall" value="全选" />
    18. <input type="button" name="checkall" id="checkallNo" value="全不选" />
    19. <input type="button" name="checkall" id="check_revsern" value="反选" />
    20. </body>
    21. <script language="javascript">
    22. window.onload=function(){
    23. //实现全选
    24. document.getElementById("checkall").onclick=function(){
    25. var itemElements=document.getElementsByName("items");
    26. for(var i=0;i<itemElements.length;i++){
    27. //方法1
    28. //itemElements[i].setAttribute("checked","checked");
    29. //方法2
    30. itemElements[i].checked="checked";
    31. }
    32. }
    33. //实现全不选
    34. document.getElementById("checkallNo").onclick=function(){
    35. var itemElements=document.getElementsByName("items");
    36. for(var i=0;i<itemElements.length;i++){
    37. //方法1,IE可以，其他浏览器不支持
    38. //itemElements[i].setAttribute("checked",null);
    39. //方法2,都行
    40. itemElements[i].checked=null;
    41. }
    42. }
    43. //实现反选
    44. document.getElementById("check_revsern").onclick=function(){
    45. var itemElements=document.getElementsByName("items");
    46. for(var i=0;i<itemElements.length;i++){
    47. //itemElements[i].checked:如果选中为true，否则false
    48. if(itemElements[i].checked){
    49. itemElements[i].checked=null;
    50. }else{
    51. itemElements[i].checked="checked";
    52. }
    53. }
    54. }
    55. //全选/全不选复选框的功能
    56. document.getElementById("checkItems").onclick=function(){
    57. var itemElements=document.getElementsByName("items");
    58. for(var i=0;i<itemElements.length;i++){
    59. //itemElements[i].checked:如果选中为true，否则false
    60. if(this.checked){
    61. itemElements[i].checked=null;
    62. }else{
    63. itemElements[i].checked="checked";
    64. }
    65. }
    66. }
    67. }
    68. </script>
    69. </html>

DOM操作复选框的更多相关文章

  1. jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等

    转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...

  2. 对jquery操作复选框

    摘要:jquery操作复选框.使用更简洁易懂,思路清晰,逻辑更明了,很实用 <!DOCTYPE html> <html> <head> <meta chars ...

  3. javascript 操作复选框无效

    <script type="text/javascript"> // 操作checkbox复选框按钮 var inputs = $('#article_list').f ...

  4. jquery操作复选框(checkbox)十二技巧

    jquery操作复选框(checkbox)的12个小技巧. 1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$( ...

  5. js操作复选框 复选框

    //复选框点击事件 function checkAll(){ let tp=$("#tp").val(); let all=$("input[name='id']&quo ...

  6. js操作复选框

    js操作复选框 JavaScript 代码: //复选框全选 $(function () { $("#select_all").click(function () { $(&quo ...

  7. jQuery 操作复选框(checkbox) attr checked不起作用

    参考资料 http://www.paobuke.com/develop/javascript/pbk849.html   这天用到jQuery功能,想实现一个简单的复选框动态全选或全不选,结果测试发现 ...

  8. jQuery操作复选框的简单使用

    开发中为了实现一个小功能,就是复选框的相互影响事件,如下图: 就是通过复选框设置权限,权限是分等级的,这是一个web管理系统的应用,一个管理员具有三个权限赋予,权限也是有等级的,其中删除和编辑权限相当 ...

  9. Qt树形控件QTreeView使用1——节点的添加删除操作 复选框的设置

    QtreeView是ui中最常用的控件,Qt中QTreeWidget比QTreeView更简单,但没有QTreeView那么灵活(QTreeWidget封装的和MFC的CTreeCtrl很类似,没有m ...

随机推荐

  1. Java中的内存划分

    Java程序在运行时,需要在内存中分配空间.为了提高运行效率,就对数据进行了不同的空间划分.因为每一片区域都有特定的数据处理方式和内存管理方式. 具体分为5种内存空间: 程序计数器:保证线程切换后能恢 ...

  2. 2018.07.01 BZOJ3295: [Cqoi2011]动态逆序对（带修主席树）

    3295: [Cqoi2011]动态逆序对 **Time Limit: 10 Sec Memory Limit: 128 MB Description 对于序列A,它的逆序对数定义为满足i<j& ...

  3. 44 The shopping psychology 购物心理

    The shopping psychology 购物心理 ①People can be addicted to different things ---e. g.,alcohol, drugs, ce ...

  4. Linux命令：ps

    Linux中的ps命令是Process Status的缩写.ps命令用来列出系统中当前运行的那些进程.ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻的那些进程,如果想要动态的显示进程信 ...

  5. Libevent学习之SocketPair实现

    Libevent设计的精化之一在于把Timer事件.Signal事件和IO事件统一集成在一个Reactor中,以统一的方式去处理这三种不同的事件,更确切的说是把Timer事件和Signal事件融合到了 ...

  6. UVa 11992 Fast Matrix Operations （线段树，区间修改）

    题意:给出一个row*col的全0矩阵,有三种操作 1 x1 y1 x2 y2 v:将x1 <= row <= x2, y1 <= col <= y2里面的点全部增加v: 2 ...

  7. python 取整itertools

    #coding:utf-8 import sys import itertools def MaxString(n,nums): list1 = nums list2 = [] for i in ra ...

  8. memCachedClient 客户端调用时注意的问题，坑

    // 第三个参数为计算该消息在服务器存放位置用 memCachedClient.add("someKey", "someValue", 10*24*60*60* ...

  9. 仿iPhone滑屏操作

    <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <m ...

  10. 团队博客-第六周：Alpha阶段项目复审（科利尔拉弗队）

    团队的排名-点评:以下排名点评谨代表个人观点,如有冒犯,评论联系删除 小组名字和链接 优点 缺点,bug报告(至少140字) 最终名次(无并列) 中午吃啥队 微信小程序应用,新型app会是一个便利的使 ...