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实现checkbox全选和反选示例
  • js实现checkbox全选、不选与反选的方法
  • JS实现的全选、全不选及反选功能【案例】
  • AngularJS实现全选反选功能
  • javaScript checkbox 全选/反选及批量删除
  • 利用Vue.js实现checkbox的全选反选效果
  • 兼容ie和firefox版本的js反选 全选 多选框
  • js html css实现复选框全选与反选
  • javascript实现简单的全选和反选功能
  • javaScript实现复选框全选反选事件详解
张贴在2