全选| 使用切换按钮取消选择所有复选框

Question

我需要选择全部并取消选择按钮切换上的所有复选框。

这是复选框的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代码，返回错误“未定义prop”

 function toggle(source) { checkboxes = document.getElementsByName('inputLableautyNoLabeledCheckbox'); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } } 

如何使用javascript或jquery实现此目的

Answer 1

工作（没有事件监听器）

注意：请参见下一个示例，该示例使用事件侦听器，并且是首选。

为了解决这个问题，您必须解决一些问题。

参见： 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>

Answer 2

尝试此操作以选择/取消选择所有复选框

  $(document).on('click','#chkAll',function(){ if($(this).prop('checked')==true){ $('.ChkSelect').attr("checked",true) } else { $('.ChkSelect').attr("checked",false) } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" class="ChkSelect"> <input type="checkbox" class="ChkSelect"> <input type="checkbox" class="ChkSelect"> <input type="checkbox" class="ChkSelect"> <input type="checkbox" class="ChkSelect"> <input type="checkbox" class="ChkSelect"> <input type="checkbox" class="ChkSelect"><br/><br/> Select/Deselect All :<input type="checkbox" id="chkAll"> <br/><br/>