基于自定义切换开关的切换启用和禁用复选框

kavya：

我已经创建了一个自定义切换开关，所以当我将其切换到ON时，它应该显示列表项中的复选框，而在关闭切换器时，它应该隐藏列表项中的复选框。我该如何实现？

拨动开关

<div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" id="customSwitch1" checked>
    <label class="custom-control-label" for="customSwitch1"><h>TOGGLE</h> 
    </label>
</div>

选框

<ul>
    <li><input type="checkbox">first</li>
    <li><input type="checkbox">second</li>
</ul>

永远帮助：

您可以将addEventListener与change event函数一起使用，show并基于switch 启用hide复选框。ULtoggle

最初，设定checkboxes显示：无，然后JS检查是否切换切换ON通过检查属性，如果开关处于关闭状态重新设置复选框没有给hide他们

现场工作演示：

let getSwitch = document.querySelector('#customSwitch1') //get switch

let getCheckboxes = document.querySelectorAll('.myCheckBoxes') //get checkboxes UL

getSwitch.addEventListener('change', function(e) {
  getCheckboxes.forEach(function(o) {
    if (e.target.checked) {
      o.style.display = 'inline-block'
    } else {
      o.style.display = 'none'
    }
  })
})

.myCheckBoxes {
  display: none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">
    <h>TOGGLE</h>
  </label>
</div>

<ul>
  <li><input class="myCheckBoxes" type="checkbox">first</li>
  <li><input class="myCheckBoxes" type="checkbox">second</li>
</ul>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。