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. hadoop群集 启动

    ###注意:严格按照下面的步骤 .5启动zookeeper集群(分别在itcast04.itcast05.itcast06上启动zk) cd /itcast/zookeeper-/bin/ ./zkS ...

  2. socketpair初识

    #include <stdio.h>  #include <string.h>  #include <unistd.h>  #include <sys/typ ...

  3. Redis可以作为简单搜索引擎优化查询

    在日常开发中在遇到一些大数据量的查询的时候,其实可以换种思路采用redis事先都缓存起来,然后通过redis里面进行结果集的运算. 原来的做法可能是 查询SQL太复杂,然后将SQL进行拆分成多个子SQ ...

  4. arduino 串口数据啊按字节分析

    #include <avr/wdt.h> #include <SoftwareSerial.h> #include <EEPROM.h> #define FPIN ...

  5. 【转】Paxos算法2-算法过程

    ——转自:{老码农的专栏} 1.编号处理 根据P2c ,proposer在提案前会先咨询acceptor查看其批准的最大的编号和value,再决定提交哪个value.之前我们一直强调更高编号的prop ...

  6. UVa 11178 Morley's Theorem (几何问题)

    题意:给定三角形的三个点,让你求它每个角的三等分线所交的顶点. 析:根据自己的以前的数学知识,应该很容易想到思想,比如D点,就是应该求直线BD和CD的交点, 以前还得自己算,现在计算机帮你算,更方便, ...

  7. Java Toolkit类用法

    这是一个AWT工具箱.它提供对本地GUI最低层次的JAVA访问.在大多情况下,这个类不直接用在小应用程序或应用程序中.具有把行图形数据转换为可显示的图像.返回字体信息.得出显示尺寸和分辨率以及获得系统 ...

  8. 3D indoor map positioning with a smartphone image

    menu 1. 基于Tango的三维建模技术(SLAM)(视觉SLAM,RGBD单目深度摄像机+罗盘仪)导出或不导出->Android 三维游戏开发技术(普通Android手机) 2. 基于An ...

  9. Hdu1728 逃离迷宫 2017-01-17 10:56 81人阅读 评论(0) 收藏

    逃离迷宫 Time Limit : 1000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Submissi ...

  10. android 热更新nuwa

    简介 Nuwa是比较流行的一种Android热补丁方案的开源实现,它的特点是成功率高,实现简单.当然,热补丁的方案目前已经有很多了,AndFix, Dexposed, Tinker等,之所以要分析Nu ...