JavaWeb_jQuery

2022-01-04 21:58:00 阅读：163 来源： 互联网

标签：jQuery function checkbox checked JavaWeb items prop name

1.练习

1.全选，全不选，反选

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

    </script>
    <script type="text/javascript">
    $(function () {
    //    给全选绑定单击事件
        $("#checkedAllBtn").click(function () {
                //只给选择项选中
            // $(":checkbox[name='items']").prop("checked",true);
            $(":checkbox").prop("checked",true);
        })
        //给全不选绑定单击事件
        $("#checkedNoBtn").click(function () {
            $(":checkbox").prop("checked",false);
        })
        //给反选绑定单击事件
        $("#checkedRevBtn").click(function () {
            //查询全部的球类的单选框
            $(":checkbox[name='items']").each(function () {
                //在each遍历的function函数中，有一个this对象。这个this对象是当前正在遍历的dom对象
                this.checked=!this.checked;
            })
            //要检查 是否满选
            //获取全部的球类个数
            var checkCount=$(":checkbox[name=items]").length;
            //获取选中的球类个数
            var checkedCount=$(":checkbox[name=items]:checked").length;
            // if (checkCount==checkedCount){
            //     $("#checkedAllBox").prop("checked",true)
            // } else {
            //     $("#checkedAllBox").prop("checked",false);
            // }
            //优化
            $("#checkedAllBox").prop("checked",checkCount==checkedCount);
        })
        //提交
        $("#submit").click(function () {
            $(":checked[name=items]:checked").each(function () {
                alert(this.value);
            })
        })
        //全选/全不选
        $("#checkedAllBox").click(function () {

            $(":checkbox[name=items]").prop("checked",this.checked);
        })
        //给球类绑定单击事件
        $(":checkbox[name=items]").click(function () {
            //要检查 是否满选
            //获取全部的球类个数
            var checkCount=$(":checkbox[name=items]").length;
            //获取选中的球类个数
            var checkedCount=$(":checkbox[name=items]:checked").length;
            // if (checkCount==checkedCount){
            //     $("#checkedAllBox").prop("checked",true)
            // } else {
            //     $("#checkedAllBox").prop("checked",false);
            // }
            //优化
            $("#checkedAllBox").prop("checked",checkCount==checkedCount);
        })

    })

    </script>
</head>
<body>


<form method="post" action="">
    您爱好的运动是？<input type="checkbox" id="checkedAllBox" >全选/全不选
    <br>
    <input type="checkbox" name="items" value="足球"/>足球
    <input type="checkbox" name="items" value="篮球"/>篮球
    <input type="checkbox" name="items" value="羽毛球"/>羽毛球
    <input type="checkbox" name="items" value="乒乓球"/>乒乓球
    <br>
    <input type="button" id="checkedAllBtn" value="全选"/>
    <input type="button" id="checkedNoBtn" value="全不选"/>
    <input type="button" id="checkedRevBtn" value="反选"/>
    <input type="button" id="submit" value="提交"/>


</form>
</body>
</html>

标签：jQuery,function,checkbox,checked,JavaWeb,items,prop,name
来源： https://blog.csdn.net/qq_44230959/article/details/122312628

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

ICode9

JavaWeb_jQuery

1.练习

1.全选，全不选，反选