脚本之家

电脑版
提示:原网页已由神马搜索转码, 内容由www.jb51.net提供.
您的位置：首页→ 网络编程→ JavaScript→ javascript技巧→ js页面一键全选或反选

JavaScript实现页面一键全选或反选

  更新时间：2022年07月05日 11:36:26  作者：静静... 
这篇文章主要为大家详细介绍了JavaScript实现页面一键全选或反选，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JavaScript实现页面一键全选或反选的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .hobby {
                width: 600px;
                height: 50px;
                background-color: #5F9EA0;
                line-height: 50px;
            }
 
            .but {
                float: right;
                margin-right: 10px;
            }
        </style>
    </head>
    <body>
        <div class="hobby">
            <!-- 创建多选框 -->
            <input type="checkbox" checked="true" name="hobby" id="" value="羽毛球" />羽毛球
            <input type="checkbox" name="hobby" id="" value="赛车" />赛车
            <input type="checkbox" name="hobby" id="" value="听音乐" />听音乐
            <input type="checkbox" name="hobby" id="" value="看杂志" />看杂志
            <!-- 选择按钮 -->
            <div class="but">
                <button type="button" onclick="selectAll(this)">全选</button>
                <button type="button" onclick="selectAllOut()">全不选</button>
            </div>
        </div>
 
        <script type="text/javascript">
            // 全选方法
            function selectAll(obj) {
                var a = document.getElementsByName("hobby");
                for (var i = 0; i < a.length; i++) {
                    a[i].checked = "true";
                    console.log(a[i].value)
                }
            };
            // 全部取消方法
            function selectAllOut() {
                var a = document.getElementsByName("hobby");
                for (var i = 0; i < a.length; i++)
                    a[i].checked = "";
            }
        </script>
    </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

相关文章

    • js实现的类marquee水平循环滚动
      marquee （水平）循环滚动的js实现 ,需要的朋友可以参考下。
      2010-03-03
    • document.getElementById方法在Firefox与IE中的区别
      相信很多朋友在写JavaScript的时候，对浏览器的兼容问题会感到很头疼。这不，烦什么，什么就来了，特记录下来，与大家分享。
      2010-05-05
    • 详解webpack import()动态加载模块踩坑
      这篇文章主要介绍了详解webpack import()动态加载模块踩坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
      2018-07-07
    • ios中视频的最后一桢问题解决
      这篇文章主要给大家介绍了关于ios中视频的最后一桢问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
      2019-05-05
    • 详解JavaScript中var和let的区别
      在JavaScript中，有3个关键字可以声明变量：var、const和let，其中var在ECMAScript的所有版本中都可以使用，而const和let只能在ECMAScript 6及更晚的版本中使用，本文就来说说二者的区别，感兴趣的可以了解一下
      2022-11-11
    • 微信小程序的宿主环境实现代码
      这篇文章主要介绍了微信小程序的宿主环境,包括scroll-view 组件的基本使用，text 组件的基本使用及rich-text 组件的基本使用，本文通过示例代码给大家介绍的非常详细，需要的朋友可以参考下
      2022-10-10
    • JavaScript中的null和undefined区别介绍
      这篇文章主要介绍了JavaScript中的null和undefined区别介绍,JavaScript中存在2个代表信息不存在的特殊值：null和undefined,本文主要讲解它们的区别,需要的朋友可以参考下
      2015-01-01
    • 详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
      本篇文章主要介绍了详解用webpack的CommonsChunkPlugin提取公共代码的3种方式，具有一定的参考价值，有兴趣的可以了解一下
      2017-11-11
    • javascript实现tabs选项卡切换效果(自写原生js)
      常用的页面效果有弹出层效果，无缝滚动效果，选项卡切换效果，接下来与大家分享一款自己用原生javascript写的选项卡切换效果，感兴趣的朋友可以参考下哈
      2013-03-03
    • js获得相对路径文件并上传到服务器的方法
      由于浏览器的安全限制,Javascript无法直接获取用户上传文件的绝对路径。但是我们可以通过一些技巧来获取文件的相对路径,这篇文章主要给大家介绍了关于js获得相对路径文件并上传到服务器的相关资料,需要的朋友可以参考下
      2023-11-11

    最新评论