整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
圖1
圖2
圖3
圖4
就愛UI - 分享UI設(shè)計的點點滴滴
果您覺得該文章對您有幫助，讓更多人受用，請關(guān)注“鍵盤碼農(nóng)”，轉(zhuǎn)發(fā)該文章。謝謝您的支持！
今天跟大家寫了一份js的聯(lián)動全選的源碼，代碼少，清晰易懂。
效果是這樣的：
點擊全選下面的就會被全部全選，或者下面的被一一選擇，全選按鈕也會被選中。運(yùn)用復(fù)選框來實現(xiàn)的聯(lián)動全選的功能。
點擊上面的復(fù)選框就會被全選
Javascript：聯(lián)動全選
當(dāng)下放的復(fù)選框沒有被全選，最上面的全選按鈕未被選中
復(fù)選框聯(lián)動全選js代碼實現(xiàn)：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function ()
{
var oBtn1 = document.getElementById('btn1');
var oBox = document.getElementById('box');
var oInputs = oBox.getElementsByTagName('input');
oBtn1.onclick = function ()
{
if (oBtn1.checked == true) {
for (var i = 0; i < oInputs.length; i++) {
oInputs[i].checked = true;
}
} else {
for (var i = 0; i < oInputs.length; i++) {
oInputs[i].checked = false;
}
}
}
//點擊每一個input框
for (var i = 0; i < oInputs.length; i++) {
oInputs[i].onclick = function ()
{
var n = 0;
for (var i = 0; i < oInputs.length; i++) {
if (oInputs[i].checked == true) {
n++;
}
}
if (n == oInputs.length) {
oBtn1.checked = true;
} else {
oBtn1.checked = false;
}
}
}
}
</script>
</head>
<body>
<h1>全選/全不選</h1>
<input type="checkbox" id="btn1">
<div id="box">
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
</div>
</body>
</html>
相對比較簡單，對于初學(xué)者應(yīng)該有很好的幫助！請關(guān)注鍵盤碼農(nóng)。后期繼續(xù)更新，如有什么看法請在下方評論。第一時間為您解答哦！
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
