設定全選與非全選：
1.基礎功能：
要求：單擊全選，則全選按鈕下的復選框全部選中，否則則全不選
根據ID獲取全選按鈕，系結點擊事件，事件內的回掉函式中$("#check input")這是使用了層級選擇器獲取所有的復選框并給他系結prop事件
使用帶兩個引數的方法第一個引數是checked屬性第二個引數true或false.注意：獲取復選框的方法很多種這只演示了一種！
$(function () {
$("#che_quan").click(function () {
$("#check input").prop("checked",$("#che_quan").is(":checked"));
});
});
2.加強
要求：當復選框中有一個不選中 則全選按鈕也不選中，當復選框全部選中 則全選按鈕也選中
注意 $(".chec:checked").length;這使用類選擇器選中所有class相同的復選框,后面直接接（：checked） 注意.chec:checked中間不能有空格 有空格的話系統會自動將他識別取子集
$(function () {
$("#che_quan").click(function () {
$("#check input").prop("checked",$("#che_quan").is(":checked"));
});
$("#check input").click(function () {
var len=$(".chec").length;
var sum = $(".chec:checked").length;
if (len==sum){
$("#che_quan").prop("checked",true);
}else{
$("#che_quan").prop("checked",false);
}
})
});
---------------------------------------------------------------
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function () {
$("#che_quan").click(function () {
$("#check input").prop("checked",$("#che_quan").is(":checked"));
});
$("#check input").click(function () {
var len=$(".chec").length;
var sum = $(".chec:checked").length;
if (len==sum){
$("#che_quan").prop("checked",true);
}else{
$("#che_quan").prop("checked",false);
}
})
});
</script>
<html>
<head>
<title>$Title$</title>
</head>
<body>
<input type="checkbox" id="che_quan"/>全選
<div id="check">
<input type="checkbox" class="chec"/>
<input type="checkbox" class="chec"/>
<input type="checkbox" class="chec"/>
<input type="checkbox" class="chec"/>
</div>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/41342.html
標籤：Web 開發
上一篇：FTP代理服務器
下一篇：java