写好之后将全选按钮和水果的列表赋予id,然后用JavaScript使全选按钮和列表里的按钮进行绑定操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="checkbox" id="selectAll">全选/全不选
<!-- <input type="checkbox" id="selectAll"> 反选-->
</p>
<hr>
<ul class="shop">
<li><input type="checkbox">苹果</li>
<li><input type="checkbox">梨</li>
<li><input type="checkbox">葡萄</li>
<li><input type="checkbox">香蕉</li>
<li><input type="checkbox">榴莲</li>
</ul>
<script type="text/javascript">
//给全选绑定一个单击事件的元素
document.getElementById("selectAll").onclick = function() {
//this:指的是当前触发单击事件的元素
console.log(this.checked)
//获取当前全选的选中状态
var isChecked = this.checked
//获取到所有的水果复选框
var cbs = document.querySelectorAll(".shop input")
//通过循环来将全选的状态赋值给水果的复选框
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = isChecked
}
}
</script>
</body>
</html>
省份
实现按钮点击全选和下拉列表根据省份复选框显示对应城市功能
给两个下拉框设置id并在省份那一个下拉框设置onchange下拉框选中事件,放入功能函数实现这个事件的内容
<tr>
<td>家庭住址:</td>
<td>
<select name="provin" id="province" onchange="changeOpt()">
<option value="请选择省份">--请选择省份--</option>
<option value="河南省">--河南省--</option>
<option value="四川省">--四川省--</option>
</select>
<select name="cities" id="cities">
<option value="请选择城市">--请选择城市--</option>
</select>
</td>
<td>
</td>
</tr>
function changeOpt(){
var cityList=new Array();
cityList['请选择省份']=['--请选择城市--'];
cityList['河南省']=['郑州','开封','洛阳','商丘','焦作'];
cityList['四川省']=['成都','绵阳','德阳','自贡','泸州'];
//先获取到选中项,也就是选中的省份的值
var province=document.getElementById("province").value
for(var i=0;i<cityList[province].length;i++){
var opt=new Option(cityList[province][i],i)
document.getElementById("cities").options.add(opt)
}
}