JavaScript简单DOM案例(全选、不选、反选)
准备一个商品列表,每个商品上有一个复选框,点击不同按钮实现全选、全不选、反选效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table width="800px" align="center">
<tr align="center">
<th>选择</th>
<th>商品名</th>
<th>编号</th>
</tr>
<tr align="center">
<td><input type="checkbox" name="goods" value="1"></td>
<td>衣服</td>
<td>1001</td>
</tr>
<tr align="center">
<td><input type="checkbox" name="goods" value="2"></td>
<td>裤子</td>
<td>1002</td>
</tr>
<tr align="center">
<td><input type="checkbox" name="goods" value="3"></td>
<td>鞋子</td>
<td>1003</td>
</tr>
<tr align="center">
<td><input type="checkbox" name="goods" value="4"></td>
<td>袜子</td>
<td>1004</td>
</tr>
<tr align="center">
<td><input type="checkbox" name="goods" value="5"></td>
<td>帽子</td>
<td>1005</td>
</tr>
<tr align="center">
<td><input type="checkbox" name="goods" value="6"></td>
<td>手套</td>
<td>1006</td>
</tr>
</table>
<div style="width: 100%;padding-top: 50px" align="center">
<button onclick="quanxuan();">全选</button>
<button onclick="quanbuxuan();">全不选</button>
<button onclick="fanxuan();">反选</button>
</div>
</body>
<script>
//点击全选执行的方法
function quanxuan(){
var goods = document.getElementsByName("goods");
for (var i=0;i<goods.length;i++){
//把所有商品元素的checked属性设置为true
goods[i].checked=true;
}
}
//点击全不选执行的方法
function quanbuxuan(){
var goods = document.getElementsByName("goods");
for (var i=0;i<goods.length;i++){
//把所有商品元素的checked属性设置为false
goods[i].checked=false;
}
}
//点击反选执行的方法
function fanxuan(){
var goods = document.getElementsByName("goods");
for (var i=0;i<goods.length;i++){
//把所有商品元素的checked属性设置为当前相反的值
goods[i].checked=!goods[i].checked;
}
}
</script>
</html>