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

Question

我已经创建了一个自定义切换开关，所以当我将其切换到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>

Answer 1

您可以使用addEventListener将事件函数更改为基于toggle开关的复选框show和hideUL。

最初，将您的checkboxes设置为显示：none，然后在JS中使用checked属性检查切换是否切换为ON，如果切换为OFF，则将复选框再次设置为none以hidetheatr

实时工作演示：

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>

Answer 2

这也可以用普通CSS 实现

.trigger {
display: none;
}
#customSwitch1:checked + .trigger {
display: block;
}

<label class="custom-control-label" for="customSwitch1"><h>TOGGLE</h></label>
<input type="checkbox" class="custom-control-input" id="customSwitch1" checked>
<div class="trigger">
<ul>
<li><input type="checkbox">first</li>
<li><input type="checkbox">second</li>
</ul>
</div>

检查这个jsfiddle

Answer 3

您可以使用onchange事件来实现，如下所示：

function myFunction() {
var chks = document.querySelectorAll("#myDIV input[type='checkbox']");
for(var i=0;i<chks.length;i++) {
if (chks[i].style.display === "none") {
chks[i].style.display = "inline";
} else {
chks[i].style.display = "none";
}
}
}

<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1" checked onchange="myFunction()">
<label class="custom-control-label" for="customSwitch1"><h>TOGGLE</h> 
</label>
</div>
<div id="myDIV">
<ul>
<li><input type="checkbox">first</li>
<li><input type="checkbox">second</li>
</ul>
</div>

Answer 4

注意：代码可以重构。。请尝试此实现。

document.getElementById("customSwitch1").addEventListener("click", toggle)
window.addEventListener("load", function() {
let isChecked = document.getElementById("customSwitch1").checked
if (isChecked) {
document.getElementById("ul_checkboxes").style.display = "block";
} else {
document.getElementById("ul_checkboxes").style.display = "none";
}
});
function toggle(e) {
let isChecked = e.target.checked
if (isChecked) {
document.getElementById("ul_checkboxes").style.display = "block";
} else {
document.getElementById("ul_checkboxes").style.display = "none";
}
}

<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>
Checkbox
<ul id="ul_checkboxes">
<li><input type="checkbox">first</li>
<li><input type="checkbox">second</li>
</ul>