使用jquery实现复选框的全选和获取选择值得功能

使用jquery实现复选框的全选和获取选择值得功能，实现效果如下图所示：

img


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
  
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //用id选择器获取button组件，这里可以用其他选择器，如class为. id为# 等。详情看jQuery官网
            $("#selectAll").click(function () {
                //设置选择框选中为true
                $("input[type='checkbox']").prop("checked", true);
            });
            var aa=""; 
            $("#getVal").click(function () {

                $("input[type='checkbox']:checkbox:checked").each(function(){ 

                    aa+=$(this).val() 
                }) 
            })
             console.log(aa)
        });
    </script>
</head>

<body>

    <input type="checkbox" value="足球"/>足球
    <input type="checkbox" value="篮球"/>篮球
    <input type="checkbox" value="羽毛球"/>羽毛球
    <input type="checkbox" value="乒乓球"/>

    <br>
    <input type="button" id="selectAll" value="全选">
    <input type="button" id="getVal" value="获取">

</body>

</html>

我猜你肯定是19计科B班的，我也是


  <script type="text/javascript">
        $(function() {
            var sum = 0;
            $("#selectAll").click(function() {
                //设置选择框选中为true
                sum++;
                if (sum % 2 == 1) {
                    $("input[type='checkbox']").prop("checked", true);
                    $("#selectAll").val("取消全选")
                } else {
                    $("input[type='checkbox']").prop("checked", false);
                    $("#selectAll").val("全选")
                }
            });
            var aa = "";
            $("#getVal").click(function() {
                    $("input[type='checkbox']:checkbox:checked").each(function() {
                        aa += $(this).val()
                    });
                    alert(aa);
                    aa = "";
                })
                // console.log(aa)
        });
    </script>