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. process_进程池

    from multiprocessing import Poolimport os,timeimport multiprocessingdef func(msg): print("msg:& ...

  2. linux下集成开发环境之ECLIPSE--在线调试、编译程序

    裸机开发流程 1.编写裸机程序:2.调试裸机程序:3.生成2进制映象(编译.链接.格式转换):4.烧写/运行2进制映象. 注意:我们自己开发的程序等等需要下载到开发板的Nandflash(类似于硬盘功 ...

  3. spring-data-jpa+hibernate 各种缓存的配置演示

    本文所有测试用代码在https://github.com/wwlleo0730/restjplat 的分支addDB上 目前在使用spring-data-jpa和hibernate4的时候,对于缓存关 ...

  4. IDEA SpringBoot Deprecated configuration property ‘server.servlet-path’

    错误样式如图所示.说我这个版本中的这个标签是过时的. 解决: 出现这个问题后,这个标签被IDEA化成了黄线,同时,想使用server.servlet-path=*.html,配置servlet路径跳转 ...

  5. LA 3026 && POJ 1961 Period （KMP算法）

    题意:给定一个长度为n字符串s,求它每个前缀的最短循环节.也就是对于每个i(2<=i<=n),求一个最大整数k>1(如果存在),使得s的前i个字符组成的前缀是某个字符串重复得k次得到 ...

  6. LVDS_IP仿真分析

    这个一个对tx_outclock移相180度后的仿真结果. tx_outclock的时钟沿与数据中心对齐. tx_coreclock时钟与inclock时钟频率相等,但有相差.

  7. 小强 ROS 机器人教程

    首先请您自行依据线标提示将小强接线连接好,完整结构如下两图所示: 小强是属于Turtlebot机器人.它由底盘.主机.Kinect相机(通过USB连接主机)组成,没有显示屏.如果要通过显示器查看主机的 ...

  8. hdu 2189 悼念512汶川大地震遇难同胞——来生一起走

    题目 这道题用了,埃式筛选法和背包,我自己没有做出来,看了别人的代码,我也做不出来,特别是c[j]+=c[j-b[i]];弄了好久都没有弄懂. 这道题的解题思路:主要是先把150以内的所有素数找出来, ...

  9. 从数据库到NoSQL思路整理

    1. 数据库为什么要算范式?细说起来太多. 范式解决了数据冗余,从而保证ACID的操作性能.不然一堆删除异常,插入异常,就没法愉快的写SQL了 另外,对于多个业务公用的数据库,范式解决了集成的问题. ...

  10. PHP 生成16 uuid

    从c# 翻译而来 <?php $i=1; $guidStr=string_make_guid(); echo $guidStr."\n"; $byte_array = unp ...