js实现简单选项功能

【JAVA】玩家

于 2021-04-04 14:20:55 发布

阅读量409

点赞数

本文链接：https://blog.csdn.net/qq_45399396/article/details/115428250

版权

JS动画专栏收录该内容

2 篇文章 0 订阅

订阅专栏

javascript ------- 对象绑定与事件触发：

效果图：
在这里插入图片描述

功能描述：制作一个关于选择的相关功能，根据上图所示，有四个按钮，这里解释一下第三个按钮，就是反选，意思就是例如我目前选择足球，则第三按钮的功能就是其他选项都勾选，足球取消勾选。

要了解的知识点：
1，获取对象
2，获取或修改对象属性
3，对象绑定事件

text.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="click.css">
    <script type="text/javascript" src="click.js"></script>
</head>
<body>
<div class="box">
<form method="get" action="#">
    你爱好的运动是？<input type="checkbox" id="a1" />全选/全不选
    <br/>
    <input type="checkbox" name="ch"  value="足球" />足球
    <input type="checkbox" name="ch"  value="篮球" />篮球
    <input type="checkbox"  name="ch" value="羽毛球" />羽毛球
    <input type="checkbox" name="ch" value="乒乓球" />乒乓球
    <br />
    <input type="button" id="s1" value="全选" />
    <input type="button" id="s2" value="全不选" />
    <input type="button" id="s3" value="反选" />
    <input type="submit" id="s4" value="提交" />
</form>
    </div>

</body>
</html>

click.css


*{
    padding: 0px;
    margin: 0px;
}
input{
    border-bottom: dotted;
    margin: 0px 5px;
    background-color: rgba(255, 174, 47, 0.78);
    font-family: Arial;
    cursor: pointer;
}

.box{
    height:150px;
    width:300px;
    margin: 15px auto;
    text-align: center;
    line-height: 50px;
    background-color: rgba(255, 228, 196, 0.84);
    border:2px royalblue dashed;
}

click.js

/**
 * Created by 肖** on 2021/4/4.
 */

window.onload=function(){

        //获取对象
        var chs = document.getElementsByName("ch");// 将每个响应事件的重复的代码设置为全局。

        var s1 = document.getElementById("s1");
        var s2 = document.getElementById("s2");
        var s3 = document.getElementById("s3");
        var s4 = document.getElementById("s4");
        var a1 = document.getElementById("a1");

        //绑定事件
        s1.onclick = function()
        {
            //       var chs = document.getElementsByName("ch");
            for(var i=0; i<chs.length; i++)
            {
                chs[i].checked=true;
            }
        }
         //绑定事件
        s2.onclick = function()
        {
            //        var chs = document.getElementsByName("ch");
            for(var i=0; i<chs.length; i++)
            {
                chs[i].checked=false;
            }
        }
         //绑定事件
        s3.onclick = function()
        {
            //       var chs=document.getElementsByName("ch");

            for(var i=0; i<chs.length; i++)
            {
                if(chs[i].checked == false)
                {
                    chs[i].checked =true;
                }
                else{
                    chs[i].checked =false;
                }
            }
        }
         //绑定事件
        s4.onclick = function()
        {
            //      var chs=document.getElementsByName("ch");
            for(var i=0; i<chs.length; i++)
            {
                if(chs[i].checked == true)
                {
                    alert(chs[i].value);
                }

            }
        }
        //绑定事件
        a1.onclick = function()
        {
            //  var chs=document.getElementsByName("ch");
            for(var i=0; i<chs.length; i++)
            {
                chs[i].checked = this.checked;
            }
        }

      //解决同步问题
        for(var i =0; i<chs.length; i++)
        {
            chs[i].onclick = function()
            {
                var flag = 1;
               for(var j=0; j<chs.length; j++)
               {
                   if(chs[j].checked == false)
                   {
                       flag = 0;
                   }
               }
                if(flag == 0){a1.checked =false;}
                else {a1.checked= true;}
            }
        }
    }