Javascript Select-all复选框突然无效
[英]Javascript Select-all checkbox suddenly not working
问题描述
I have 60 checkboxes with the name "AG[]" and i was using a check-all function to do the job, combined with an eventlistener on buttons that were named CheckAll. 
我有60个名为“AG []”的复选框，我使用check-all函数来完成这项工作，并在名为CheckAll的按钮上组合了一个eventlistener。 Suddenly the buttons stopped working.. The select-all function is 突然，按钮停止工作..全选功能是
function selectAll(a,b) {
var checkies = document.getElementsByName('AG[]');
for (var i = a;i < b;i++) {
checkies[i].checked = !(checkies[i].checked);
}
}
which works, because I tried onloading one run of this function. 哪个有效，因为我试着加载这个函数的一个运行。 This is the full script onload that adds the event listener on the buttons. 这是完整的脚本onload，它在按钮上添加了事件监听器。
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);
}
If i run the function by itself like 如果我自己运行这个功能就像
SelectAll(0,8);
it works, but if I do it through addeventlistener it does not. 它有效，但如果我通过addeventlistener这样做，它不会。 The code was working well and I was able to check-all with buttons but i dont get what happened.. Here's the jsfiddle jsfiddle 代码运行良好，我能够用按钮检查所有但我不知道发生了什么.. 这里是jsfiddle jsfiddle
* Okay new problem. * 好的新问题。 * the code that Andreas posted is still not working for me which probably means its because im running it from IE7, which does not support addeventlistener. * Andreas发布的代码仍然不适合我，这可能意味着它因为我从IE7运行它，它不支持addeventlistener。 So how do i make my code support firefox/chrome(Addeventlistener) and 那么我如何使我的代码支持firefox / chrome（Addeventlistener）和
3 个解决方案
解决方案1
2 已采纳 2012-08-22 20:32:03
Keeping addEventListener vs onclick in mind, the pragmatic and simple version is the following since it works in all browsers - downside as mentioned in the link is onlick supports only one event handler, while attachevent/addEventListener will fire all registered callbacks. 保持addEventListener vs 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)}
}
解决方案2
1 2012-08-22 20:32:00
I've made some changes to work in IE < 9 , ie 我已经对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);
}
Complete Demo . 完成演示 。
解决方案3
0 2012-08-22 20:27:41
You forgot to put the word function before script1() so you got an error because it didn't know what script1() was on your body onload . 你忘了在script1（）之前放置单词function ，所以你得到一个错误，因为它不知道你的body onload上有什么script1() 。 I tried this code out (pretty much a copy and paste (I don't like JS fiddle all the time) and it seems to work. 我尝试了这个代码（几乎是一个副本和粘贴（我不喜欢JS小提琴），它似乎工作。
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
JQuery / Javascript select-all通过单击链接或从复选框下拉列表中选择“select-all” - JQuery/Javascript select-all by clicking link or selecting “select-all” from a checkbox dropdown
全选按钮在haml文件中不起作用 - Select-All button is not working in haml file
我正在使用数据表进行列表，我为全选添加了复选框列，但是jQuery不适用于那些复选框 - I am using data-table for listing, i added checkbox column for select-all, but jquery not working only for those checkboxes
无法在haml文件中通过javascript添加全选按钮 - Unable to add select-all button through javascript in haml file
optgroup中的全选选项 - select-all options in a optgroup
如果取消选中任何子复选框，如何取消选中“全选”复选框 - How do I uncheck 'select-all' checkbox if any child checkbox gets unchecked
通过外部按钮刷新行数据时，取消选择Ag-Grid全选复选框 - Deselecting Ag-Grid select-all checkbox when the row data is refreshed via an outside button
“column select-all”使用复选框而不影响表php中的其他列 - “column select-all” using checkbox without affecting other column in a table php
如何从Backrid.js中的全选事件中忽略复选框 - How to omit checkbox from select-all event in Backrid.js
使用全选复选框移动数据 - Moving data using Select-All Checkboxes
相关标签