整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

Javascript:简单易懂的,复选框联动全选,很

Javascript:简单易懂的,复选框联动全选,很实用!

果您觉得该文章对您有帮助,让更多人受用,请关注“键盘码农”,转发该文章。谢谢您的支持!

今天跟大家写了一份js的联动全选的源码,代码少,清晰易懂。

效果是这样的:

点击全选下面的就会被全部全选,或者下面的被一一选择,全选按钮也会被选中。运用复选框来实现的联动全选的功能。

点击上面的复选框就会被全选

Javascript:联动全选

当下放的复选框没有被全选,最上面的全选按钮未被选中

复选框联动全选js代码实现:

<!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>

相对比较简单,对于初学者应该有很好的帮助!请关注键盘码农。后期继续更新,如有什么看法请在下方评论。第一时间为您解答哦!

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>省市联动</title>
<script>
function $(id) {
    return document.getElementById(id);
}
//定义一个数组
var sheng=['请选择','湖北省','湖南省'];
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中变量定义省份及对应的城市,应用Select标签对象,实现二级级联的下拉菜单选中效果。也就是说,在省份下拉菜单中,选中一个省份时,在城市下拉菜单中出现对应城市选择内容,效果如下:

当选择广东为省份的时候,城市栏会自动识别广东省下的城市展示出来

当省份选择广东省份的时候,去点击城市的选择栏会出现广东对应的城市选择!

具体代码如下:

html:

javascript: