Checkbox 對象的屬性
accessKey 設置或返回訪問 checkbox 的快捷鍵。
alt 設置或返回不支持 checkbox 時顯示的替代文本。
checked 設置或返回 checkbox 是否應被選中。
defaultChecked 返回 checked 屬性的默認值。
disabled 設置或返回 checkbox 是否應被禁用。
form 返回對包含 checkbox 的表單的引用。
id 設置或返回 checkbox 的 id。
name 設置或返回 checkbox 的名稱。
tabIndex 設置或返回 checkbox 的 tab 鍵控制次序。
type 返回 checkbox 的表單元素類型。
value 設置或返回 checkbox 的 value 屬性的值
界面如下:
實現原理:當點擊全選時將所有名爲checkbox的checked屬性改爲true,即跟隨全選屬性一起變化;
當點擊反選時,將checkbox的checken屬性改爲與當前checked屬性相反就可以
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
</head>
<body>
<input type="checkbox" name="item" id="">checked<br>
<input type="checkbox" name="item" id="">checked<br>
<input type="checkbox" name="item" id="">checked<br>
<input type="checkbox" name="item" id="">checked<br>
<input type="checkbox" name="item" id="">checked<br>
<input type="checkbox" name="item" id="">checked<br>
<input type="checkbox" name="item" id="">checked<br>
<input type="checkbox" name="item" id="">checked<br>
<input type="checkbox" name="item" id="">checked<br>
<div style="width: 100%;height: 1px;background: #EEE"></div>
<input type="checkbox" name="allSel" id="">全選
<input type="checkbox" name="cancel" id="">反選
</body>
<script>
//全選
$("input[name='allSel']").click(function(){
//name爲item的checked屬性跟隨全選的checked屬性一起變化 $("input[name='item']").prop("checked",$(this).prop("checked"));
});
//反選
$("input[name='cancel']").click(function(){
//將name的item的checked屬性改爲與當前相反
$("input[name='item']").each(function(){
$(this).prop('checked',!$(this).attr('checked'));
});
})
</script>
</html>效果如下:
