点餐选择框实例（全选、反选的运用）

最新推荐文章于 2022-04-13 00:03:18 发布

Mrlonely思考笔记

最新推荐文章于 2022-04-13 00:03:18 发布

阅读量343

点赞数

CC 4.0 BY-SA版权

分类专栏：网站效果案例文章标签：全选反选 js 前端

本文链接：https://blog.youkuaiyun.com/zjhzjh893/article/details/81785009

网站效果案例专栏收录该内容

4 篇文章

订阅专栏

/*需求分析：
（1）点击上方选择框，让下方所有选择框状态与上方选择框一致
（2）点击下方选择框
    * 如果所有的选择框都是选中状态，上方选择框选中状态
    * 反之，只要有一个选择框不是选中状态，上方选择框未选中状态

 思路分析：
    * 1.获取元素
    * 2.注册事件
    * 3.事件处理

 */

效果预览
/原生js实现/

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            border-collapse: collapse;
            border: 1px solid #c0c0c0;
            width: 500px;
            margin: 100px auto;
            text-align: center;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
            height: 24px;
        }

        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <th>
            <input type="checkbox" name="" id="checkAll"/>全选/全不选
        </th>
        <th>菜名</th>
        <th>商家</th>
        <th>价格</th>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="check"/>
        </td>
        <td>红烧肉</td>
        <td>隆江猪脚饭</td>
        <td>￥200</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="check"/>
        </td>
        <td>香酥排骨</td>
        <td>隆江猪脚饭</td>
        <td>￥998</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="check"/>
        </td>
        <td>北京烤鸭</td>
        <td>隆江猪脚饭</td>
        <td>￥88</td>
    </tr>


</table>

</body>

<script>
    /*需求分析：（1）点击上方选择框，让下方所有选择框状态与上方选择框一致
    （2）点击下方选择框
        * 如果所有的选择框都是选中状态，上方选择框选中状态
        * 反之，只要有一个选择框不是选中状态，上方选择框未选中状态

     思路分析：
        * 1.获取元素
        * 2.注册事件
        * 3.事件处理

     */

    // 1.获取元素
    var checkAll = document.getElementById('checkAll');//上方选择框（全选全不选）
    var checkList = document.getElementsByName('check');//下方选择框数组
    // 2.注册事件

    //2.1 上方选择框
    checkAll.onclick = function (  ) {
        // 3.事件处理
        //让下方选择框状态与自身一致
        console.log ( this.checked );
        for(var i = 0;i<checkList.length;i++){
            checkList[i].checked = this.checked;
        }
    }

    //2.2 下方选择框列表
    for(var i = 0;i<checkList.length;i++){
        checkList[i].onclick = function (  ) {
            //3.事件处理
            console.log ( this.checked );
            /*1.如果一个操作产生的结果只有两种情况：开关思想
            2.先假设开关成立true
            3.验证假设，如果被推翻就把开关状态改为false

            如果所有的选择框都是选中状态，上方选择框选中状态
               反之，只要有一个选择框不是选中状态，上方选择框未选中状态

             */
            var isAllCheck = true;//假设本次点击刚好所有的都是选中状态
            for(var j = 0;j<checkList.length;j++){
                if(checkList[j].checked == false){//只要有任何一个选择框的状态是未选中，假设被推翻
                    isAllCheck = false;
                    break;//这里可以加break关键字提高性能，只要假设被推翻后面没有验证必要
                }
            }

            checkAll.checked = isAllCheck;//将开关的结果赋值给上方选择框

        }
    }

</script>
</html>

/*jQuery实现方法
网页结构一样，在这里给出js代码*/

<script src="jquery-1.12.4.js"></script>
<script>
    /*需求分析：（1）点击上方选择框，让下方所有选择框状态与上方选择框一致
    （2）点击下方选择框
        * 如果所有的选择框都是选中状态，上方选择框选中状态
        * 反之，只要有一个选择框不是选中状态，上方选择框未选中状态

     思路分析：
        * 1.获取元素
        * 2.注册事件
        * 3.事件处理

     */

    $(function () {

        $('#checkAll').on('click',function () {
            $('input[name=check]').prop('checked',$(this).prop('checked'));
        })

        $('input[name=check]').on('click',function (){
            //如何判断下面的多选框都选中了
            //获取下面所有多选框的个数;  获取下面所有选中的多选框的个数.  如果这两个值相等那么就表示下面的多选框们都被选中了.
            var allNum = $('input[name=check]').length;//下面部分的多选框数目
            var selNum = $('input[name=check]:checked').length;//选中的多选框数目
            // console.log(selNum);
            //如果这两个值相等那么就表示下面的多选框们都被选中了.上面的多选框就要选中.
            // if(allNum == selNum){
            //     $('#checkAll').prop('checked',true);
            // }else {
            //     $('#checkAll').prop('checked',false);
            // }
            //上面的if-else结构可以用下面一句话代替
            $('#checkAll').prop('checked',allNum == selNum);
        })
    })


</script>