整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
果您覺得該文章對(duì)您有幫助，讓更多人受用，請(qǐng)關(guān)注“鍵盤碼農(nóng)”，轉(zhuǎn)發(fā)該文章。謝謝您的支持！
今天跟大家寫了一份js的聯(lián)動(dòng)全選的源碼，代碼少，清晰易懂。
效果是這樣的：
點(diǎn)擊全選下面的就會(huì)被全部全選，或者下面的被一一選擇，全選按鈕也會(huì)被選中。運(yùn)用復(fù)選框來實(shí)現(xiàn)的聯(lián)動(dòng)全選的功能。
點(diǎn)擊上面的復(fù)選框就會(huì)被全選
Javascript：聯(lián)動(dòng)全選
當(dāng)下放的復(fù)選框沒有被全選，最上面的全選按鈕未被選中
復(fù)選框聯(lián)動(dòng)全選js代碼實(shí)現(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;
}
}
}
//點(diǎn)擊每一個(gè)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>
相對(duì)比較簡單，對(duì)于初學(xué)者應(yīng)該有很好的幫助！請(qǐng)關(guān)注鍵盤碼農(nóng)。后期繼續(xù)更新，如有什么看法請(qǐng)?jiān)谙路皆u(píng)論。第一時(shí)間為您解答哦！
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>省市聯(lián)動(dòng)</title>
<script>
function $(id) {
return document.getElementById(id);
}
//定義一個(gè)數(shù)組
var sheng=['請(qǐng)選擇','湖北省','湖南省'];
var shi=[[],['武漢市','孝感市'],['長沙市','株洲市']];
window.onload=function() {
for(var i=0;i<sheng.length;i++) {
var op=new Option(sheng[i],sheng[i]);
$('sheng').options.add(op);
}
$('sheng').onchange=function() {
var index=$('sheng').selectedIndex;
$('shi').length=0;
for(var i=0;i<shi[index].length;i++) {
var op=new Option(shi[index][i],shi[index][i]);
$('shi').options.add(op);
}
}
}
</script>
</head>
<body>
<select id='sheng'></select>
<select id='shi'></select>
</body>
</html>
用javascript中變量定義省份及對(duì)應(yīng)的城市，應(yīng)用Select標(biāo)簽對(duì)象，實(shí)現(xiàn)二級(jí)級(jí)聯(lián)的下拉菜單選中效果。也就是說，在省份下拉菜單中，選中一個(gè)省份時(shí)，在城市下拉菜單中出現(xiàn)對(duì)應(yīng)城市選擇內(nèi)容，效果如下：
當(dāng)選擇廣東為省份的時(shí)候，城市欄會(huì)自動(dòng)識(shí)別廣東省下的城市展示出來
當(dāng)省份選擇廣東省份的時(shí)候，去點(diǎn)擊城市的選擇欄會(huì)出現(xiàn)廣東對(duì)應(yīng)的城市選擇！
具體代碼如下：
html:
javascript：
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
