在IE中切换javascript不起作用的复选框
toggle checkboxes with javascript not working in IE
我有一堆按类别组织的复选框。我为每个类别都有一个复选框,用于切换相应的复选框组。由于某些原因,它在IE中不起作用;然而,我能够获得单独的全选/清除所有链接以正常工作。
请参阅此处的代码:http://jsfiddle.net/mobilemelody/DyZF4/1/
对于更多上下文,这些框用于打开和关闭地图API中的google融合层。谢谢
编辑
对不起,我最初把代码放在JSfiddle中,因为我认为这对人们来说会更容易。。
Javascript:
function toggleOn(source) {
var checkboxes = source;
for(var i = 0; i < checkboxes.length; i++)
checkboxes[i].checked = true;
}
function toggleOff(source) {
var checkboxes = source;
for(var i = 0; i < checkboxes.length; i++)
checkboxes[i].checked = false;
}
function toggle(toggleBox, source) {
var checkboxes = source;
for(var i = 0; i < checkboxes.length; i++)
checkboxes[i].checked = toggleBox.checked;
}
HTML:
<div>
<table>
<tr><td colspan="5"><label><strong>Routes:</strong></label></td></tr>
<tr>
<td><input type="checkbox" checked="checked" name="route" id="toggle-local" onClick="toggle(this, document.getElementsByClassName('local'))">local</td>
<td><input type="checkbox" checked="checked" name="route" id="17" value="17" class="local"/><label>17</label></td>
<td><input type="checkbox" checked="checked" name="route" id="19" value="19" class="local"/><label>19</label></td>
<td><input type="checkbox" checked="checked" name="route" id="22" value="22" class="local"/><label>22</label></td>
</tr><tr>
<td></td>
<td><input type="checkbox" checked="checked" name="route" id="23" value="23" class="local"/><label>23</label></td>
<td><input type="checkbox" checked="checked" name="route" id="29" value="29" class="local"/><label>29</label></td>
<td><input type="checkbox" checked="checked" name="route" id="35" value="35" class="local"/><label>35</label></td>
</tr><tr>
<td></td>
<td><input type="checkbox" checked="checked" name="route" id="36" value="36" class="local"/><label>36</label></td>
<td><input type="checkbox" checked="checked" name="route" id="45" value="45" class="local"/><label>45</label></td>
<td><input type="checkbox" checked="checked" name="route" id="49" value="49" class="local"/><label>49</label></td>
</tr><tr>
<td></td>
<td><input type="checkbox" checked="checked" name="route" id="51" value="51" class="local"/><label>51</label></td>
<td><input type="checkbox" checked="checked" name="route" id="71" value="71" class="local"/><label>71</label></td>
</tr><tr>
<td><input type="checkbox" checked="checked" name="route" id="toggle-stage" onClick="toggle(this, document.getElementsByClassName('stage'))">stage</td>
<td><input type="checkbox" checked="checked" name="route" id="61" value="61" class="stage"/><label>61</label></td>
<td><input type="checkbox" checked="checked" name="route" id="68" value="68" class="stage"/><label>68</label></td>
</tr><tr>
<td><input type="checkbox" checked="checked" name="route" id="toggle-shuttle" onClick="toggle(this, document.getElementsByClassName('shuttle'))">shuttle</td>
<td><input type="checkbox" checked="checked" name="route" id="222" value="222" class="shuttle"/><label>222</label></td>
<td><input type="checkbox" checked="checked" name="route" id="233" value="233" class="shuttle"/><label>233</label></td>
<td><input type="checkbox" checked="checked" name="route" id="257" value="257" class="shuttle"/><label>257</label></td>
</tr><tr>
<td></td>
<td><input type="checkbox" checked="checked" name="route" id="259" value="259" class="shuttle"/><label>259</label></td>
</tr><tr>
<td><input type="checkbox" checked="checked" name="route" id="toggle-school" onClick="toggle(this, document.getElementsByClassName('school'))">school</td>
<td><input type="checkbox" checked="checked" name="route" id="113" value="113" class="school"/><label>113</label></td>
<td><input type="checkbox" checked="checked" name="route" id="117" value="117" class="school"/><label>117</label></td>
<td><input type="checkbox" checked="checked" name="route" id="125" value="125" class="school"/><label>125</label></td>
</tr><tr>
<td></td>
<td><input type="checkbox" checked="checked" name="route" id="126" value="126" class="school"/><label>126</label></td>
<td><input type="checkbox" checked="checked" name="route" id="127" value="127" class="school"/><label>127</label></td>
<td><input type="checkbox" checked="checked" name="route" id="139" value="139" class="school"/><label>139</label></td>
</tr></table>
</div>
<a id="select-all" onClick="toggleOn(document.getElementsByName('route'))" style="cursor: pointer;">select all</a> |
<a id="clear-all" onClick="toggleOff(document.getElementsByName('route'))" style="cursor: pointer;">clear all</a>
document.getElementsByClassName()
不受IE<9。但是,您可以使用这个pollyfill,它将为没有的遗留浏览器定义它:
(function () {
document.getElementsByClassName = function(classes) {
return this.querySelectorAll('.' + classes.replace(' ', ' .'));
}
}());
另一种选择是使用jQuery的类选择器
相关文章:
- 单击li时不能选中复选框
- 不正确的复选框重定向
- 不能在复选框旁边显示元素
- $.click() 和 $.trigger() 不会激活复选框的 onchange 函数
- 为什么 javascript 不起作用复选框
- 代码点火器 - jQuery 数据表 搜索和分页时不会保留复选框中的选中值
- 输入到选项卡脚本不会传递复选框
- IE似乎会取消选中一个不确定的复选框,而Chrome和FF会在点击时选中它
- jstree不兼容的复选框和类型插件
- 意外的空格,而不是不必要的复选框标签
- 是否有可能在单击复选框时停止更改,挂起某些复选框
- Oninput不会触发复选框
- 不发送隐藏复选框输入值:(
- JavaScript不能选中复选框
- 当我在
上有侦听器时,为什么我不能在复选框上有' - IE8:设置类时不调用onclick复选框
- jQuery检查所有不工作的复选框
- Javascript代码来选择在IE8中不工作的复选框
- jQuery可点击不选中输入:复选框?选中所有复选框
- 为什么,用ReactJS,我不能使复选框反应被点击