js全選，全選以後，如果選中其中一個，全選效果取消，如果複選框全部選中，全選按鈕自動也被選中
阿新 • • 發佈：2019-01-22
<!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>
<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>