每周总结9

2022-09-04 19:30:08 阅读：166 来源： 互联网

标签：总结 function checkbox checked name 每周 items prop

进行全选\全不选全选反选的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.5.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#checkedallbtn").click(function () { //全选
                $(":checkbox").prop("checked", true);
            })
            $("#checkednotbtn").click(function () {  //全不选
                $(":checkbox").prop("checked", false);
            })
            $("#checkedfanbtn").click(function () {  //反选
                $(":checkbox[name='items']").each(function () {
                    this.checked = !this.checked;   //代码简化
                });
　　　　　　　　　　//在反选之后判断是否选满
                var allqiu = $(":checkbox[name='items']").length;
                var checkedqiu = $(":checkbox[name='items']:checked").length;

                if (allqiu == checkedqiu) {
                    $("#checkedall").prop("checked", true);
                } else {
                    $("#checkedall").prop("checked", false);
                }
                // $("#checkedall").prop("checked",allqiu == checkedqiu);
            })
            $(":checkbox[name='items']").click(function () {  //在每个复选框选了之后判断是否选满
                var allqiu = $(":checkbox[name='items']").length;
                var checkedqiu = $(":checkbox[name='items']:checked").length;
                $("#checkedall").prop("checked", allqiu == checkedqiu);
            })
            $("#sub").click(function () {
                $(":checkbox[name='items']:checked").each(function () {
                    alert(this.value);
                })
            })
            $("#checkedall").click(function () {
                $(":checkbox").prop("checked", this.checked);
            })


        })
    </script>
</head>
<body>
你爱好的运动是？<input type="checkbox" id="checkedall">全选/全不选<br>
<input type="checkbox" name="items" value="足球">足球<input type="checkbox" name="items" value="篮球">篮球<input type="checkbox"name="items">羽毛球<input
        type="checkbox" name="items">乒乓球<br>
<button id="checkedallbtn">全选</button>
<button id="checkednotbtn">全不选</button>
<button id="checkedfanbtn">反选</button>
<button id="sub">提交</button>
</body>
</html>

标签：总结,function,checkbox,checked,name,每周,items,prop
来源： https://www.cnblogs.com/-0112/p/16655764.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

每周总结9