Javascript全选复选框突然不起作用
Javascript Select-all checkbox suddenly not working
我有60个名为"AG[]"的复选框，我使用check-all函数来完成这项工作，并在名为CheckAll的按钮上使用事件侦听器。突然按钮停止工作。。全选功能是
function selectAll(a,b) {
var checkies = document.getElementsByName('AG[]');
for (var i = a;i < b;i++) {
checkies[i].checked = !(checkies[i].checked);
}
}
这是有效的，因为我试着加载了一次这个函数。这是在按钮上添加事件侦听器的完整脚本加载。
function script1() {
var el = document.getElementsByName('CheckAll');
el1 = el[0];
el2 = el[1];
el3 = el[2];
el4 = el[3];
el5 = el[4];
el6 = el[5];
el7 = el[6];
el1.addEventListener('click', function(){selectAll(0,8)}, false);
el2.addEventListener('click', function(){selectAll(8,16)}, false);
el3.addEventListener('click', function(){selectAll(16,26)}, false);
el4.addEventListener('click', function(){selectAll(26,34)}, false);
el5.addEventListener('click', function(){selectAll(34,44)}, false);
el6.addEventListener('click', function(){selectAll(44,52)}, false);
el7.addEventListener('click', function(){selectAll(52,60)}, false);
}
如果我像一样自己运行函数
SelectAll(0,8);
它是有效的，但如果我通过addeventlistener来实现，它就不起作用了。代码运行良好，我可以用按钮检查所有内容，但我不明白发生了什么。。这是jsfiddle jsfiddle
*好的，新问题*Andreas发布的代码对我来说仍然不起作用，这可能是因为我从IE7运行它，IE7不支持addeventlistener。那么，我如何使我的代码支持firefox/chrome（Addeventlistener）和
记住addEventListener和onclick，实用而简单的版本如下，因为它适用于所有浏览器-链接中提到的缺点是onlick只支持一个事件处理程序，而attachevent/addEventListener将触发所有注册的回调。
演示
function selectAll(a,b) {
var checkies = document.getElementsByName('AG[]');
for (var i = a;i < b;i++) {
checkies[i].checked = !checkies[i].checked;
}
}
function script1(){
var el = document.getElementsByName('CheckAll'); // get all elements with that name="" attribute
el[0].onclick=function() { selectAll(0,8) }
el[1].onclick=function() { selectAll(8,16)}
el[2].onclick=function() { selectAll(16,26)}
el[3].onclick=function() { selectAll(26,34)}
el[4].onclick=function() { selectAll(34,44)}
el[5].onclick=function() { selectAll(44,52)}
el[6].onclick=function() { selectAll(52,60)}
}
我对IE < 9中的工作进行了一些更改，即
addEvent(el1, 'click', function(){selectAll(0,8)},false);
function addEvent(el, event, callback, bubble){
if(el.addEventListener) el.addEventListener(event, callback, bubble);
else if(el.attachEvent) el.attachEvent('on'+event, callback, bubble);
}
完成演示。
您忘记将单词function放在script1（）之前，因此出现错误，因为它不知道body onload上的script1()是什么。我试过这个代码（相当于复制粘贴（我不喜欢JS fiddle），它似乎很有效。
<!DOCTYPE html>
<html>
<style>
html, body { height: 100%; }
#container { margin-top: 29px; }
header { height:29px; margin: 0 49px; background-color:#999999; }
#div1 { width: 29px; height: 100%; background-color: yellow; display: inline-block; }
#div2 { width: 100%; height: 100%; background-color: blue; display: inline-block; }
#div3 { width: 29px; height: 100%; background-color: red; display: inline-block; float: right;}
#div4 { height: 100%; background-color: yellow; display: inline-block; float: right; }
</style>
<body>
<body onload="script1();">
Please check the box if you took a course in the respective subject in that semester.
<table width="200" border="1">
<tr>
<th scope="col"></th>
<th scope="col">8th Sem 1</th>
<th scope="col">8th Sem 2</th>
<th scope="col">9th Sem 1</th>
<th scope="col">9th Sem 2</th>
<th scope="col">10th Sem 1</th>
<th scope="col">10th Sem 2</th>
<th scope="col">11th Sem 1</th>
<th scope="col">11th Sem 2</th>
<th scope="col">12th Sem 1</th>
<th scope="col">12th Sem 2</th>
<th scope="col">Select All Semesters</th>
</tr>
<tr>
<th scope="row">History</th>
<td></td>
<td></td>
<td><input name="AG[]" type="checkbox" value="A9Sem1"></td>
<td><input name="AG[]" type="checkbox" value="A9Sem2"></td>
<td><input name="AG[]" type="checkbox" value="A10Sem1"></td>
<td><input name="AG[]" type="checkbox" value="A10Sem2"></td>
<td><input name="AG[]" type="checkbox" value="A11Sem1"></td>
<td><input name="AG[]" type="checkbox" value="A11Sem2"></td>
<td><input name="AG[]" type="checkbox" value="A12Sem1"></td>
<td><input name="AG[]" type="checkbox" value="A12Sem2"></td>
<td><input type="button" name="CheckAll" value="Check All"></td>
</tr>
<tr>
<th scope="row">English</th>
<td></td>
<td></td>
<td><input name="AG[]" type="checkbox" value="B9Sem1"></td>
<td><input name="AG[]" type="checkbox" value="B9Sem2"></td>
<td><input name="AG[]" type="checkbox" value="B10Sem1"></td>
<td><input name="AG[]" type="checkbox" value="B10Sem2"></td>
<td><input name="AG[]" type="checkbox" value="B11Sem1"></td>
<td><input name="AG[]" type="checkbox" value="B11Sem2"></td>
<td><input name="AG[]" type="checkbox" value="B12Sem1"></td>
<td><input name="AG[]" type="checkbox" value="B12Sem2"></td>
<td> <input type="button" name="CheckAll" value="Check All"></td>
</tr>
<tr>
<th scope="row">Mathematics</th>
<td><input name="AG[]" type="checkbox" value="C8Sem1">*</td>
<td><input name="AG[]" type="checkbox" value="C8Sem2">*</td>
<td><input name="AG[]" type="checkbox" value="C9Sem1"></td>
<td><input name="AG[]" type="checkbox" value="C9Sem2"></td>
<td><input name="AG[]" type="checkbox" value="C10Sem1"></td>
<td><input name="AG[]" type="checkbox" value="C10Sem2"></td>
<td><input name="AG[]" type="checkbox" value="C11Sem1"></td>
<td><input name="AG[]" type="checkbox" value="C11Sem2"></td>
<td><input name="AG[]" type="checkbox" value="C12Sem1"></td>
<td><input name="AG[]" type="checkbox" value="C12Sem2"></td>
<td> <input type="button" name="CheckAll" value="Check All"></td>
</tr>
<tr>
<th scope="row">Science</th>
<td></td>
<td></td>
<td><input name="AG[]" type="checkbox" value="D9Sem1"></td>
<td><input name="AG[]" type="checkbox" value="D9Sem2"></td>
<td><input name="AG[]" type="checkbox" value="D10Sem1"></td>
<td><input name="AG[]" type="checkbox" value="D10Sem2"></td>
<td><input name="AG[]" type="checkbox" value="D11Sem1"></td>
<td><input name="AG[]" type="checkbox" value="D11Sem2"></td>
<td><input name="AG[]" type="checkbox" value="D12Sem1"></td>
<td><input name="AG[]" type="checkbox" value="D12Sem2"></td>
<td> <input type="button" name="CheckAll" value="Check All"></td>
</tr>
<tr>
<th scope="row">Foreign Language</th>
<td><input name="AG[]" type="checkbox" value="E8Sem1"></td>
<td><input name="AG[]" type="checkbox" value="E8Sem2"></td>
<td><input name="AG[]" type="checkbox" value="E9Sem1"></td>
<td><input name="AG[]" type="checkbox" value="E9Sem2"></td>
<td><input name="AG[]" type="checkbox" value="E10Sem1"></td>
<td><input name="AG[]" type="checkbox" value="E10Sem2"></td>
<td><input name="AG[]" type="checkbox" value="E11Sem1"></td>
<td><input name="AG[]" type="checkbox" value="E11Sem2"></td>
<td><input name="AG[]" type="checkbox" value="E12Sem1"></td>
<td><input name="AG[]" type="checkbox" value="E12Sem2"></td>
<td> <input type="button" name="CheckAll" value="Check All"></td>
</tr>
<tr>
<th scope="row">Visual and Performing Arts</th>
<td></td>
<td></td>
<td><input name="AG[]" type="checkbox" value="F9Sem1"></td>
<td><input name="AG[]" type="checkbox" value="F9Sem2"></td>
<td><input name="AG[]" type="checkbox" value="F10Sem1"></td>
<td><input name="AG[]" type="checkbox" value="F10Sem2"></td>
<td><input name="AG[]" type="checkbox" value="F11Sem1"></td>
<td><input name="AG[]" type="checkbox" value="F11Sem2"></td>
<td><input name="AG[]" type="checkbox" value="F12Sem1"></td>
<td><input name="AG[]" type="checkbox" value="F12Sem2"></td>
<td> <input type="button" name="CheckAll" value="Check All"></td>
</tr>
<tr>
<th scope="row">Electives</th>
<td></td>
<td></td>
<td><input name="AG[]" type="checkbox" value="G9Sem1"></td>
<td><input name="AG[]" type="checkbox" value="G9Sem2"></td>
<td><input name="AG[]" type="checkbox" value="G10Sem1"></td>
<td><input name="AG[]" type="checkbox" value="G10Sem2"></td>
<td><input name="AG[]" type="checkbox" value="G11Sem1"></td>
<td><input name="AG[]" type="checkbox" value="G11Sem2"></td>
<td><input name="AG[]" type="checkbox" value="G12Sem1"></td>
<td><input name="AG[]" type="checkbox" value="G12Sem2"></td>
<td> <input type="button" name="CheckAll" value="Check All"></td>
</tr>
</table>
</body>
<script>
function selectAll(a,b) {
var checkies = document.getElementsByName('AG[]');
for (var i = a;i < b;i++) {
checkies[i].checked = !(checkies[i].checked);
}
}
function script1(){
var el = document.getElementsByName('CheckAll'); // get all elements with that name="" attribute
el1 = el[0]; // get the first element (in this case, being the only one)
el2 = el[1];
el3 = el[2];
el4 = el[3];
el5 = el[4];
el6 = el[5];
el7 = el[6];
// now we have an element to call the method on
el1.addEventListener('click', function(){selectAll(0,8)}, false);
el2.addEventListener('click', function(){selectAll(8,16)}, false);
el3.addEventListener('click', function(){selectAll(16,26)}, false);
el4.addEventListener('click', function(){selectAll(26,34)}, false);
el5.addEventListener('click', function(){selectAll(34,44)}, false);
el6.addEventListener('click', function(){selectAll(44,52)}, false);
el7.addEventListener('click', function(){selectAll(52,60)}, false);
}
</script>
</html>
相关文章：
- electronic BrowserWindow的最小高度和宽度在hide(）show(）方法之后不起作用
- 监视函数从服务返回不起作用，但作用域函数起作用
- 幻灯片滚动javascript不起作用
- 简单的javascript在Shopify中不起作用
- Recaptcha在IE7和IE8中不起作用
- Ember Data DS.Model's set函数不起作用
- JsFiddle上的鼠标事件不起作用
- 我的AngularJS表达式没有'不起作用
- 点击按钮输入不起作用
- 面向对象的Javascript代码在IE7中不起作用
- 分部隐藏在jquery中不起作用
- 在phonegap应用程序内部重定向不起作用
- Array.length似乎不起作用;console.log则显示其他情况
- $ionicplatform内的$scope不;不起作用
- 我的javascript for循环不起作用
- Meteor-添加用户自定义字段的方法不起作用
- 为什么 .focus(） 不起作用，而 .css(“color”，“red”） 在同一个选择器上起作用
- Textarea必需的attribut在javascript中不起作用
- Javascript全选复选框突然不起作用
- AngularJS-加载我的指令突然不起作用
