标签:type gre 返回 获取 script EDA 遍历 padding color
1、全选和全不选函数:
<script> function checkAll(){ var checkAllEle = document.getElementById("checkAll"); if(checkAllEle.checked==true){ var checkOnes = document.getElementsByName("checkOne"); for(var i=0;i<checkOnes.length;i++){ checkOnes[i].checked=true; } }else{ var checkOnes = document.getElementsByName("checkOne"); for(var i=0;i<checkOnes.length;i++){ checkOnes[i].checked=false; } } } </script>
getElementById方法:返回对拥有指定ID的第一个对象的引用。
getElementsByName方法:返回带有指定名称的对象的集合。
<tr>
<th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th>
<th bgcolor="blanchedalmond "align="middle" >序号</th>
<th bgcolor="blanchedalmond "align="middle ">学号</th>
<th bgcolor="blanchedalmond "align="middle ">姓名</th>
<th bgcolor="blanchedalmond "align="middle ">平时成绩</th>
<th bgcolor="blanchedalmond "align="middle ">期末成绩</td>
<th bgcolor="blanchedalmond "align="middle ">学期总成绩</th>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"/></td>
<td align="middle ">1</td>
<td align="middle ">20100300201</td>
<td align="middle ">张小丽</td>
<td align="middle ">95</td>
<td align="middle ">95</td>
<td align="middle ">95</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"/></td>
<td bgcolor="grey "align="middle ">2</td>
<td bgcolor="grey "align="middle ">20100300202</td>
<td bgcolor="grey "align="middle ">李宁</td>
<td bgcolor="grey "align="middle ">90</td>
<td bgcolor="grey "align="middle ">88</td>
<td bgcolor="grey "align="middle ">89</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"/></td>
<td align="middle ">3</td>
<td align="middle ">20100300203</td>
<td align="middle ">刘梅</td>
<td align="middle ">98</td>
<td align="middle ">92</td>
<td align="middle ">95</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"/></td>
<td bgcolor="grey "align="middle ">4</td>
<td bgcolor="grey "align="middle ">20100300204</td>
<td bgcolor="grey "align="middle ">王刚</td>
<td bgcolor="grey "align="middle ">98</td>
<td bgcolor="grey "align="middle ">90</td>
<td bgcolor="grey "align="middle ">94</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"/></td>
<td align="middle ">5</td>
<td align="middle ">20100300205</td>
<td align="middle ">郑军</td>
<td align="middle ">90</td>
<td align="middle ">85</td>
<td align="middle ">87</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"/></td>
<td bgcolor="grey "align="middle ">6</td>
<td bgcolor="grey "align="middle ">20100300206</td>
<td bgcolor="grey "align="middle ">杨波</td>
<td bgcolor="grey "align="middle ">80</td>
<td bgcolor="grey "align="middle ">80</td>
<td bgcolor="grey "align="middle ">80</td>
</tr>
getElementById方法获取的是与属性在同一行的复选框的状态,如果已经选中就用getElementsByName方法获取一个集合,并对集合进行遍历将复选框的状态变为选中,否则,将复选框全部变为未选中。
2、完整代码:
<html>
<head>
<meta charset="utf-8">
<title>全选和全不选</title>
<script>
function checkAll(){
var checkAllEle = document.getElementById("checkAll");
if(checkAllEle.checked==true){
var checkOnes = document.getElementsByName("checkOne");
for(var i=0;i<checkOnes.length;i++){
checkOnes[i].checked=true;
}
}else{
var checkOnes = document.getElementsByName("checkOne");
for(var i=0;i<checkOnes.length;i++){
checkOnes[i].checked=false;
}
}
}
</script>
</head>
<body>
<table width="600" border="1" align="center" cellpadding="5" cellspacing="3">
<caption>成绩登记表</caption>
<tr>
<th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th>
<th bgcolor="blanchedalmond "align="middle" >序号</th>
<th bgcolor="blanchedalmond "align="middle ">学号</th>
<th bgcolor="blanchedalmond "align="middle ">姓名</th>
<th bgcolor="blanchedalmond "align="middle ">平时成绩</th>
<th bgcolor="blanchedalmond "align="middle ">期末成绩</td>
<th bgcolor="blanchedalmond "align="middle ">学期总成绩</th>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"/></td>
<td align="middle ">1</td>
<td align="middle ">20100300201</td>
<td align="middle ">张小丽</td>
<td align="middle ">95</td>
<td align="middle ">95</td>
<td align="middle ">95</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"/></td>
<td bgcolor="grey "align="middle ">2</td>
<td bgcolor="grey "align="middle ">20100300202</td>
<td bgcolor="grey "align="middle ">李宁</td>
<td bgcolor="grey "align="middle ">90</td>
<td bgcolor="grey "align="middle ">88</td>
<td bgcolor="grey "align="middle ">89</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"/></td>
<td align="middle ">3</td>
<td align="middle ">20100300203</td>
<td align="middle ">刘梅</td>
<td align="middle ">98</td>
<td align="middle ">92</td>
<td align="middle ">95</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"/></td>
<td bgcolor="grey "align="middle ">4</td>
<td bgcolor="grey "align="middle ">20100300204</td>
<td bgcolor="grey "align="middle ">王刚</td>
<td bgcolor="grey "align="middle ">98</td>
<td bgcolor="grey "align="middle ">90</td>
<td bgcolor="grey "align="middle ">94</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"/></td>
<td align="middle ">5</td>
<td align="middle ">20100300205</td>
<td align="middle ">郑军</td>
<td align="middle ">90</td>
<td align="middle ">85</td>
<td align="middle ">87</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"/></td>
<td bgcolor="grey "align="middle ">6</td>
<td bgcolor="grey "align="middle ">20100300206</td>
<td bgcolor="grey "align="middle ">杨波</td>
<td bgcolor="grey "align="middle ">80</td>
<td bgcolor="grey "align="middle ">80</td>
<td bgcolor="grey "align="middle ">80</td>
</tr>
</table>
</body>
</html>
标签:type gre 返回 获取 script EDA 遍历 padding color
原文地址:https://www.cnblogs.com/zhai1997/p/12230382.html