enable and disable checkbox based on toggle of Custom toggle Switch

Question

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>

Always Helping · Accepted Answer · 2020-09-02T08:34:38.627

2

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>

edited Sep 02 '20 at 08:34

answered Sep 02 '20 at 08:17

Always Helping

14,316
4
13
29

I want li items to be displayed all the time.Only the checkboxes should be shown and hidden – kavya Sep 02 '20 at 08:26
@kavya See my updated answer. working as you wanted. – Always Helping Sep 02 '20 at 08:34
Thank you for the help..Can I have the same with Check and uncheck checkbox with toggle button..The checkbox should be visible all the time and check and uncheck should be based on toggle button – kavya Sep 02 '20 at 09:01
@kavya Thats feels like a seperate question to ask as it is totally different thing you are asking - According to stackoverflow this need to be asked in different thread. I hope you understand. – Always Helping Sep 02 '20 at 09:31

Saniya syed qureshi · Answer 2 · 2020-09-02T08:51:43.340

1

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>

edited Sep 02 '20 at 08:51

answered Sep 02 '20 at 08:18

Saniya syed qureshi

3,053
3
16
22

Please do **not** use recemened using **inline event handler** - its a bad idea - Read this => [Why are inline event handler attributes a bad idea in modern semantic HTML](https://stackoverflow.com/questions/11737873/why-are-inline-event-handler-attributes-a-bad-idea-in-modern-semantic-html) – Always Helping Sep 02 '20 at 08:22

score 1 · Answer 3 · answered Sep 02 '20 at 08:26

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

score 0 · Answer 4 · answered Sep 02 '20 at 08:44

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>

enable and disable checkbox based on toggle of Custom toggle Switch

4 Answers4