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. js导出到word、json、excel、csv

    tableExport.js ///*The MIT License (MIT) //Copyright (c) 2014 https://github.com/kayalshri/ //Permis ...

  2. linux 硬盘分区攻略

    以下的sdX代表硬盘分区(如sda1,sda2,sdb1...等等),如果已有的硬盘分区需要改变大小的话,请参考另一篇文章. /boot:开机用的磁盘空间了,至少78MB,一般给100MB就好了. / ...

  3. 20155235 2016-2017-2 《Java程序设计》第7周学习总结

    20155235 2016-2017-2 <Java程序设计>第7周学习总结 教材学习内容总结 第十二章 Lambda 认识Lambda语法 Lambda语法概览 Lambda表达式与函数 ...

  4. 2018.09.08 NOIP模拟 division（状压dp）

    这么sb的题考场居然写挂了2233. 假设n=∏iaiki" role="presentation" style="position: relative;&qu ...

  5. htoi的实现

    htoi的实现 /************************************************************************* > File Name: h ...

  6. Python 析构方法__del__

    class Car: def __init__(self): print('---ok---') def __del__(self): print('----deconstrcut-------') ...

  7. 【redis】linux上的安装与配置（详细图解）

    转载自:https://blog.csdn.net/yjqyyjw/article/details/73293455:经过个人测试也适用于当前最新稳定的3.x的版本,顺便填了几个坑. 1.下载 htt ...

  8. Quartus调用MOdelsim仿真过程

    quarutsii调用modelsim实际是相对比较简单的.因为不需要选择要编译的库. 调用前的设置:设置调用的工具,也就是下面的Tool name,选择仿真语言,在这里选择为Verilog HDL, ...

  9. C#操作Excel(创建、打开、读写、保存)几种方法的总结

    在.NET开发中,不管是web程序还是桌面软件(尤其是涉及数据库操作的MIS系统等),常常需操作Excel,如导出数据到Excel,读取Excel中数据到程序中等.总结起来,其操作不外乎创建.打开.读 ...

  10. @Autowired 和 @Qualifier

    一 无冲突 bean工厂 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=" ...