Jquery-全选和取消的一个坑

在做一个商城的购物车的时候遇到了一个坑, 购物车一般都有全选按钮, 再次点击就会全部消除, 在网上查到的答案全部都是使用attr来做的, 无一例外都不能用, 之后才知道要使用jquery的prop和removeProp

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>demo</title>

    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

    <script>

        $(function(){

            isChecked = false;

            $('#all').click(function(){

                isChecked = !isChecked;

                if(isChecked){

                    $('.option').prop("checked",true)

                }else{

                    $('.option').removeProp("checked")

                }

            })

        })

    </script>

</head>

<body>

    <input type="checkbox" value="1" class="option">1</input>

    <br>

    <input type="checkbox" value="2" class="option">2</input>

    <br>

    <input type="checkbox" value="3" class="option">3</input>

    <br>

    <input type="checkbox" value="4" class="option">4</input>

    <br>

    <input type="checkbox" value="全选" id="all">全选</input>

</body>

</html>

秒客网

Jquery-全选和取消的一个坑

相关文章