复选框的全选及其反选的实现

最新推荐文章于 2024-06-07 22:01:55 发布

稚枭天卓

最新推荐文章于 2024-06-07 22:01:55 发布

阅读量690

点赞数

分类专栏： HTML编程 jQuery 入门 JS入门文章标签： prop children chechbox 复选框全选

本文链接：https://blog.csdn.net/u013630349/article/details/52779538

版权

jQuery 入门同时被 3 个专栏收录

33 篇文章 0 订阅

订阅专栏

JS入门

30 篇文章 0 订阅

订阅专栏

HTML编程

12 篇文章 0 订阅

订阅专栏

关键方法概述

prop() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值时，则返回第一个匹配元素的值。
当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。
注意：prop() 方法应该用于检索属性值，例如 DOM 属性（如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected）。
提示：如需检索 HTML 属性，请使用 attr() 方法代替。
提示：如需移除属性，请使用 removeProp() 方法。
语法
返回属性的值：
$(selector).prop(property)
设置属性和值：
$(selector).prop(property,value)
使用函数设置属性和值：
$(selector).prop(property,function(index,currentvalue))
设置多个属性和值：
$(selector).prop({property:value, property:value,...})

children() 方法返回被选元素的所有直接子元素。

DOM 树：该方法只沿着 DOM 树向下遍历单一层级。如需向下遍历多个层级（返回子孙节点或其他后代），请使用 find() 方法。

源码示例

$(function(){
    $('.ckAll').click(function(){
        if($(this).children("input").prop("checked")){
            $("p").text("aaa");
            $(this).parent("div").children(".box-items").each(function(){
                $(this).prop("checked",true);
            });
        }
        else{
            $("p").text("bbb");
            $(this).parent("div").children(".box-items").each(function(){
                $(this).prop("checked",false);
            });
        }
    });
});

<html>
<head>

</head>
<body>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script type="text/javascript" src="test001.js"></script>

<div>
    <label class="ckAll"><input class="box-all" type="checkbox" /><span>全选</span></label>
    <input class="box-items" type="checkbox" />
    <input class="box-items" type="checkbox" />
    <input class="box-items" type="checkbox" />
    <input class="box-items" type="checkbox" />
    <input class="box-items" type="checkbox" />
</div>

<div>
    <label class="ckAll"><input class="box-all" type="checkbox" /><span>全选</span></label>
    <input class="box-items" type="checkbox" />
    <input class="box-items" type="checkbox" />
    <input class="box-items" type="checkbox" />
    <input class="box-items" type="checkbox" />
    <input class="box-items" type="checkbox" />
</div>
<p>
    000
</p>
</body>
</html>