javascript - 全选 | 使用切换按钮取消选择所有复选框
问题描述
我需要在按钮切换上全选并取消选中所有复选框。
这是复选框的html代码
<div class="accordion-header js-accordion-header">
<input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-2" value="tc_Logout" aria-hidden="true" style="display: none;">
<label for="labelauty-2">
<span class="labelauty-unchecked-image"></span>
<span class="labelauty-checked-image"></span>
</label> tc_Logout
</div>
当我选中此复选框时,aria-checked="true"会自动添加到<label for="labelauty-2">
哪个输出中
<label for="labelauty-1" aria-checked="true">
<span class="labelauty-unchecked-image"></span>
<span class="labelauty-checked-image"></span>
</label>
它在选中和未选中时将状态更改为true或false 。
现在我有几个这样的复选框,需要使用切换按钮选中或取消选中。
这是我的切换按钮的 html 代码
<div class="toggle-wrap w-checkbox float-right">
<input class="toggle-ticker w-checkbox-input" data-ix="toggle-switch" data-name="Toggle Switch" id="Toggle-Switch" name="Toggle-Switch" type="checkboxtoggle" onclick="toggle()">
<label class="toggle-label w-form-label" for="Toggle-Switch"></label>
<div class="toggle">
<div class="toggle-active">
<div class="active-overlay"></div>
<div class="top-line"></div>
<div class="bottom-line"></div>
</div>
</div>
</div>
这是我的 JS 代码,它返回错误“未定义道具”
function toggle(source) {
checkboxes = document.getElementsByName('inputLableautyNoLabeledCheckbox');
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = source.checked;
}
}
如何使用 javascript 或 jquery 实现这一点
解决方案
工作(没有事件监听器)
注意:请参阅下一个示例,该示例使用事件侦听器并且是首选。
你有一些我必须解决的问题才能让它工作。
见:https ://jsfiddle.net/0p64mdsg/4
首先,您的输入类型实际上并不是切换。this
其次,当您调用切换功能时,您没有通过。
我的 jsFiddle 中的当前代码版本:
function toggle(source) {
checkboxes = document.getElementsByName('inputLableautyNoLabeledCheckbox');
alert('TEST2');
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = source.checked;
}
}
<div class="accordion-header js-accordion-header">
<input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-2" value="tc_Logout" aria-hidden="true" >
<label for="labelauty-2">
<span class="labelauty-unchecked-image"></span>
<span class="labelauty-checked-image"></span>
</label> tc_Logout
</div>
<label for="labelauty-1" aria-checked="true">
<span class="labelauty-unchecked-image"></span>
<span class="labelauty-checked-image"></span>
</label>
Test1
<div class="toggle-wrap w-checkbox float-right">
<input class="toggle-ticker w-checkbox-input" data-ix="toggle-switch" data-name="Toggle Switch" id="Toggle-Switch" name="Toggle-Switch" type="checkbox" onclick="toggle(this)">
<label class="toggle-label w-form-label" for="Toggle-Switch"></label>
<div class="toggle">
<div class="toggle-active">
<div class="active-overlay"></div>
<div class="top-line"></div>
<div class="bottom-line"></div>
</div>
</div>
</div>
使用事件监听器
由于onClick
不是首选,您应该像这样处理切换点击处理:https ://jsfiddle.net/0p64mdsg/15/
<script>
document.getElementById("Toggle-Switch").addEventListener("click", toggle);
function toggle(source) {
checkboxes = document.getElementsByName('inputLableautyNoLabeledCheckbox');
alert('TEST2' + source);
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = document.getElementById("Toggle-Switch").checked;
}
}
</script>
推荐阅读
- windows - 按进程及其线程查找 CPU 使用率和内核数
- android - 在哪里可以找到 android 中的第 0 块闪存?
- c# - 事件限制是什么意思?
- django - 如何查询组并根据用户数降序排列?
- python - 有人能告诉我为什么我的代码不起作用吗?
- android - Admob Adview 启用手势
- java - 是否有等效于 VB6 Strconv 的 Java (Android)
- python - 合并 2 个变量时,concat 不会按照我想要的方式打印它们
- android - Android Datepicker 单格颜色
- ruby-on-rails - 如何正确使用 has_many 在 json 中构建层次结构?