一、需求

1.点击全选可以选中所有的选项

2.点击取消可以撤销上一步的操作

3.点击反选可以实现将上一步的操作进行相反的操作

二、题干

如图所示，是比较简单的html代码。

<style>
    form{
        display: flex;
    }
</style>
<body>
    <form action="">
        <div id="box">
            <span>韭菜盒子</span>
            <input type="checkbox" name="1" id="ck">
            <span>鸡蛋灌饼</span>
            <input type="checkbox" name="1" id="ck">
            <span>番茄炒蛋</span>
            <input type="checkbox" name="1" id="ck">
        </div>
        <div id="box1">
            <input type="button" value="全选" id="Sa">
            <input type="button" value="取消" id="cancel">
            <input type="button" value="反选" id="Rs">
            
        </div>
    </form>
</body>

三、思路

1.通读题干可知解决此题有两种方法，一种是写点击事件来解决，另外一种则是依托事件委托的形式来解决。两种方法皆可。因为在写这道题时，只考虑到了第一种，所以第二种在这里只说思路。

2.第二种则是创建按钮父元素的事件委托，形参处接收的是鼠标的点击事件对象，根据 event.target 的值来进行具体的操作， event.target 获取的就是鼠标点击到的元素，根据if条件来判断点击的是某个按钮，根据按钮来细分操作。

3.而第一种解决办法则是，根据按钮功能的不同来创建不同的点击事件，其中最关键的一点就是判断多选框是否被选中？

4.我们知道，在多选框中有一条属性 checked 可以用来判断单选框多选框的选中问题。

5.获取到所有的input元素，用以判断

6.在我点击了全选时，我box中的所有input按钮应该处于一个选中的状态

7.取消这个也很好理解，取消是取消我上一步的选中操作

8.反选则是将我上一步的操作进行反选。

四、代码

解题代码如下：

    <script>
        console.log(ck.length);
        Sa.onclick = function(){
            for(let i = 0; i < ck.length; i++){
                ck[i].checked = true;
            }
        }
        cancel.onclick =function(){
            for(let i = 0; i < ck.length; i++){
                if(ck[i].checked == true){
                    ck[i].checked = false;
                }
            }
        }
        Rs.onclick =function(){
            for(let i = 0; i < ck.length; i++){
                if(ck[i].checked == true){
                    ck[i].checked = false;
                }else{
                    ck[i].checked = true;
                }
            }
        }
    </script>

总结

本题不难，主要考虑到了事件委托，以及对多选框的选中与否问题，只要仔细思考就可以找到解决办法。

前端入门基础 - 多选框的选择

一、需求

二、题干

三、思路

四、代码

总结

猜你喜欢