用JQuery 实现的全选反选全不选

最新推荐文章于 2022-01-10 11:00:58 发布

Larvae_

最新推荐文章于 2022-01-10 11:00:58 发布

阅读量138

点赞数

文章标签： js jquery checkbox

本文链接：https://blog.csdn.net/Larvae_/article/details/115015578

版权

用JQuery 实现的全选反选全不选

<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/html"
      xmlns="http://www.w3.org/1999/html"
      xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css"
          href="css/my.css"/>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>

        $(function () {
            $("#all").click(function () {
                $(":checkbox").prop("checked", true);
            });
            $("#allnot").click(function () {
                $(":checkbox").prop("checked", false);
            });
            $("#discheck").click(function () {
                $(":checkbox[name='items']").each(function () {
                    this.checked = !this.checked;
                });
                //检查是否满选
                //全部的爱好个数
                var allcount = $(":checkbox[name='items']").length;
                //选中的爱爱好个数
                var checkcount = $(":checkbox[name='items']:checked").length;
                //方式一
                // if(allcount ==checkcount){
                //     $("#checkedllBox").prop("checked",true);
                // }else{
                //     $("#checkedllBox").prop("checked",false);
                // }
                //方式二
                $("#checkedllBox").prop("checked",allcount ==checkcount);
            });
             //提交的单击事件
            $("#sendbtn").click(function (){
                $(":checkbox[name='items']:checked").each(function (){
                    alert(this.value);
                });
            });

            $("#checkedllBox").click(function (){
                 $(":checkbox[name='items']").prop("checked",this.checked);
            });
            //全部的爱好的单击
            $(":checkbox[name='items']").click(function (){
                //全部的爱好个数
                var allcount = $(":checkbox[name='items']").length;
                //选中的爱爱好个数
                var checkcount = $(":checkbox[name='items']:checked").length;
                $("#checkedllBox").prop("checked",allcount ==checkcount);
            });


        })
    </script>
</head>
<body>
<form action="http://vip.biancheng.net/register.php" method="post" class="asw" name="formName">
    您爱好的运动是?<input type=checkbox id="checkedllBox"/>全选/全不选
    <br/>
    <input type="checkbox" name="items" id="run" value="跑步">跑步
    <input type="checkbox" name="items" id="read" value="value">阅读
    <input type="checkbox" name="items" id="shop" value="购物">购物
    <input type="checkbox" name="items" id="game" value="游戏">游戏
</form>
<span><input type="button" id="all" value="全选"></span>
<span><input type="button" id="allnot" value="全不选"></span>
<span><input type="button" id="discheck" value="反选"></span>
<span><input type="button" id="sendbtn" value="提交"></span>
</body>
</html>