JavaWeb_jQuery

2022/1/4 22:03:34

编程Tag： jQuery checkbox function prop name checked javaweb items

本文主要是介绍JavaWeb_jQuery，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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>

这篇关于JavaWeb_jQuery的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

JavaWeb_jQuery

1.练习

1.全选，全不选，反选

相关编程文章