天天看點

複選框的全選及其反選的實作

關鍵方法概述

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>