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

Posted 2023-03-05

【中文标题】全选 |使用切换按钮取消选择所有复选框

【英文标题】：Select All | Deselect All check boxes using a toggle button

【发布时间】：2019-02-14 21:23:12

【问题描述】：

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

这里是复选框的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 is not defined"

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

如何使用 javascript 或 jquery 实现这一点

【问题讨论】：

您必须为您的问题创建一个工作示例，以便我们检查并解决它。

【参考方案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>

【讨论】：

拜托，你能否演示一下如何使用不显眼的 JavaScript； onclick 应该被载入史册……

@David Thomas，你更喜欢 eventListers（vanilla 还是 JQuery）？

鉴于 OP 似乎没有使用 jQuery - 尽管存在标签 - 我总是选择纯 JavaScript EventTarget.addEventListener()。

完成！谢谢！

【参考方案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/>