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

忘是亡心i 2022-07-16 07:09 191阅读 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);
                });
            }
        });
    });