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

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

猜你喜欢

转载自blog.csdn.net/fredrik/article/details/75072947
今日推荐