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. 深入浅出 JMS（三） - ActiveMQ 消息传输

    深入浅出 JMS(三) - ActiveMQ 消息传输 一.消息协商器(Message Broker) broke:消息的交换器,就是对消息进行管理的容器.ActiveMQ 可以创建多个 Broker ...

  2. 8.15jsp document 头部声明 区别

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

  3. Caused by: java.lang.NoClassDefFoundError at com.jc.zm.ZmAlarmAction.analyDo(ZmAlarmAction.java:198)

    ZmPlanDayAction objPlanDay = new ZmPlanDayAction();   objPlanDay.setDao(dao);   objPlanDay.setServle ...

  4. Devexpress VCL Build v2013 vol 14.1.5 发布

    What's New in 14.1.5 (VCL Product Line)   New Major Features in 14.1 What's New in VCL Products 14.1 ...

  5. 在jsp中怎么使用Cookie?el表达式中获取cookie的问题

    初学jsp,不清楚cookie的使用方法,希望高手指点一下!   一般来说有两种办法,在JSP中使用Java的嵌入脚本. 例如: 写入Cookie <html> <head>. ...

  6. 2018.07.24 bzoj3531: [Sdoi2014]旅行（树链剖分+动态开点）

    传送门 树链剖分. 如何维护? 如果颜色少直接每种颜色一颗线段树走人. 但这题颜色数量不大于1e5" role="presentation" style="po ...

  7. hdu-1060（数学问题）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1061 思路:结论:a=10^(N*lg(N) - [lg(N^N)]); 证明:如果一直a是结果,则a ...

  8. linux week3

      2.如何快速的回到 上⼀一次所在的位置 cd An argument of - is equivalent to $OLDPWD.  cd -  #cd $OLDPWD cd - #快速的回到 上 ...

  9. ansible-playbook api 2.0 运行项目

    上篇 api 的文章 <ansible-playbook api 2.0 直接运行> 介绍的是直接将 tasks 直接写在 代码中的,本文介绍 api 运行整个项目 [root@10_1_ ...

  10. 获取手机的唯一标示uuid

    NSString *idfv = [[[UIDevice currentDevice] identifierForVendor] UUIDString];