js全选，全选以后，如果选中其中一个，全选效果取消，如果复选框全部选中，全选按钮自动也被选中

最新推荐文章于 2024-04-25 11:38:14 发布

JspFnta

最新推荐文章于 2024-04-25 11:38:14 发布

阅读量9.3k

点赞数 1

分类专栏： JS 文章标签： js

本文链接：https://blog.csdn.net/Fredrik/article/details/75072947

版权

JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function selectAll(){
var sel=document.getElementById('quanxuan');
var f =sel.checked;
var food=document.getElementsByName('food');
for(var i=0;i<food.length;i++){
food[i].checked=f;
}
}
function selectOne(){

var f=true;
var food=document.getElementsByName('food');
var sel=document.getElementById('quanxuan');
for(var i=0;i<food.length;i++){
if(food[i].checked!=f){
sel.checked=false;
break;
}
sel.checked=f;
}
}

function del(o){
var s=confirm("确定要删除吗？");
var a =o.parentNode.parentNode;
if(s==true){
a.remove();
}

}
</script>
</head>

<body>
<table>
<tr>
<th><input type="checkbox" name="foods" οnclick="selectAll()" id="quanxuan"/></th>
<th>菜品</th>
<th>价格</th>
<th>操作</th>
</tr>
<tr>
<th><input type="checkbox" name="food" οnclick="selectOne()" /></th>
<th>西红柿鸡蛋面</th>
<th>8</th>
<th><a href="#1" οnclick="del(this)">删除</a></th>
</tr>
<tr>
<th><input type="checkbox" name="food" οnclick="selectOne()"/></th>
<th>香菇面</th>
<th>9</th>
<th><a href="#2" οnclick="del(this)">删除</a></th>
</tr>
<tr>
<th><input type="checkbox" name="food" οnclick="selectOne()" /></th>
<th>大葱椒麻鸡</th>
<th>10</th>
<th><a href="#3" οnclick="del(this)">删除</a></th>
</tr>
</table>
</body>
</html>