香蕉久久这里只有精品,久久精品国产一区二区三区不卡

文章插圖
今天跟大家寫了一份js的聯(lián)動全選的源碼，代碼少，清晰易懂。
效果是這樣的：
點擊全選下面的就會被全部全選，或者下面的被一一選擇，全選按鈕也會被選中。運用復選框來實現(xiàn)的聯(lián)動全選的功能。
點擊上面的復選框就會被全選
Javascript：聯(lián)動全選
當下放的復選框沒有被全選，最上面的全選按鈕未被選中
復選框聯(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>
相對比較簡單，對于初學者應該有很好的幫助！請關注鍵盤碼農(nóng) 。后期繼續(xù)更新，如有什么看法請在下方評論。第一時間為您解答哦！

以上關于本文的內(nèi)容，僅作參考！溫馨提示：如遇健康、疾病相關的問題，請您及時就醫(yī)或請專業(yè)人士給予相關指導!

「愛刨根生活網(wǎng)」www.malaban59.cn小編還為您精選了以下內(nèi)容，希望對您有所幫助：

設置按鈕無邊框的方法 js復選框是否選中