jQuery 练习：全选，全不选，反选（尚硅谷视频）

最新推荐文章于 2024-04-20 11:50:28 发布

yjg_

最新推荐文章于 2024-04-20 11:50:28 发布

阅读量274

点赞数

分类专栏：前端学习文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_51917627/article/details/127761018

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

jQuery 练习：全选，全不选，反选

在进行赋值的时候有两种方式

attr()：可以设置和获取属性的值，不推荐操作 checked、readOnly 等
attr 方法还可以操作非标准的属性。
prop() ：可以设置和获取属性的值,推荐操作 checked，selected，disabled 等

值得注意的是：因为我们这里操作的是复选框，所以选择的是prop()，attr只能判断checked是否存在，无法判断选择框是否为选中状态或未选中状态。
prop可以准确的判断出多选框的选择状态

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="E:\前端代码\03_jQuery\Demo\script\jquery-1.7.2.js"></script>
    <script type="text/javascript">
    $(function(){
        //给全选绑定单击事件
        $("#checkedAllBtn").click(function(){
            $(":checkbox").prop("checked",true);
        });
         //给全不选绑定单击事件
         $("#checkedNoBtn").click(function(){
            $(":checkbox").prop("checked",false);
        });
        // 反选单击事件
$("#checkedRevBtn").click(function () {
// 查询全部的球类的复选框
$(":checkbox[name='items']").each(function () {
// 在 each 遍历的 funct ion 函数中，有一个 this 对象。这个 this 对象是当前正在遍历到的 dom 对象
//通过this来给checkbox赋相反的值
this.checked = !this.checked;
});
// 要检查 是否满选
// 获取全部的球类个数
var allCount = $(":checkbox[name='items']").length;
// 再获取选中的球类个数，通过：allCount == checkedCount，给checkedAllBox赋ture。或者false
var checkedCount = $(":checkbox[name='items']:checked").length;
$("#checkedAllBox").prop("checked",allCount == checkedCount);
});
// 提交按钮单击事件
$("#sendBtn").click(function () {
// 获取选中的球类的复选框
$(":checkbox[name='items']:checked").each(function () {
// 在事件的 function 函数中，有一个 this 对象，这个 this 对象是当前正在响应事件的 dom 对象
alert("选中了："+this.value);
});
});
// 给【全选/全不选】绑定单击事件
$("#checkedAllBox").click(function () {
// 在事件的 function 函数中，有一个 this 对象，这个 this 对象是当前正在响应事件的 dom 对象
//在checkbox选择name为items的元素，赋值为checkedAllBox是否选中的值
$(":checkbox[name='items']").prop("checked",this.checked);
});
// 给全部球类绑定单击事件
$(":checkbox[name='items']").click(function () {
// 要检查 是否满选
// 获取全部的球类个数
var allCount = $(":checkbox[name='items']").length;
// 再获取选中的球类个数
var checkedCount = $(":checkbox[name='items']:checked").length;
//allCount == checkedCount如果相等就选中checkedAllBox
$("#checkedAllBox").prop("checked",allCount == checkedCount);
});
    });
    </script>
</head>
<body>
    <!--    &nbsp;是空格        <br>是换行 -->
    <center>
       <form action="" method="post"  >
        你爱好的运动是？<input type="checkbox" id="checkedAllBox">全选/全不选
        <br> <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> <br>
        <input type="button" id="checkedAllBtn" value="全选">
        &nbsp;   &nbsp;
        <input type="button" id="checkedNoBtn" value="全不选">
        &nbsp;   &nbsp;
        <input type="button" id="checkedRevBtn" value="反选">
        &nbsp;   &nbsp;
        <input type="button" id="sendBtn" value="提交 ">
    </form>  
    </center>
   
    
</body>
</html>