enable and disable checkbox based on toggle of Custom toggle Switch

user_13818054 0
Viewed 1816

I have created a custom toggle switch, so when I toogle it to ON, it should display the checkboxes in list item and on turning OFF the toggle, it should hide checkboxes in list item. How can I achieve this?

Toggle switch

<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>
    <li><input type="checkbox">first</li>
    <li><input type="checkbox">second</li>
</ul>
css html javascript
4 Answers

You can use addEventListener with a change event function to show and hide your checkboxes UL based on toggle switch.

Initially, set your checkboxes to display: none and then in JS check if the toggle is switched ON by using checked attribute and if toggle is OFF set the checkboxes to none again to hide them

Live Working Demo:

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>

user_136690480

You can achieve it by using onchange event as shown below: 

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>

user_59959730

This could possibly be achieved with plain CSS too

.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>

Check this jsfiddle

user_141910220

NB: The code can be refactored..Try this implementation.

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>

user_83363170
Related