<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<tr>
<td>
全选
<input type="checkbox" id="all" onclick="check()">
</td>
<td>项目</td>
<td>状态</td>
<td>数量</td>
<td>单价</td>
<td>小计</td>
</tr>
<tr>
<td>
<input type="checkbox" name="title" id="" onclick="checkOne()">
</td>
<td>华为手机mate14</td>
<td>正在出售</td>
<td>10</td>
<td>5000</td>
<td>50000</td>
</tr>
<tr>
<td>
<input type="checkbox" name="title" id="" onclick="checkOne()">
</td>
<td>小米14</td>
<td>正在出售</td>
<td>10</td>
<td>3000</td>
<td>30000</td>
</tr>
</table>
</body>
<script>
//全选
function check(){
//先获取选项按钮
var checkall = document.getElementById("all")
//获取所有商品的复选框
var ches = document.getElementsByName("title")
for(var i =0;i<ches.length;i++){
ches[i].checked = checkall.checked
}
}
//单个选择
function checkOne(){
var checked = 0;//选择
var notchecked = 0;//取消选择
//先获取选项按钮
var checkall = document.getElementById("all")
//获取所有商品的复选框
var ches = document.getElementsByName("title")
for(var i =0;i<ches.length;i++){
if(ches[i].checked){//判断是否已选择
checked++;
}else{
notchecked++;
}
}
if(checked == ches.length){
checkall.checked=true;
}else if(notchecked==ches.length){
checkall.checked=false;
}else{
checkall.checked=false;
}
}
</script>
</html>
javascript复选框,全选或全不选
最新推荐文章于 2023-07-07 16:55:54 发布