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-02 08:34:38Z

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 2, 2020 at 8:34

answered Sep 2, 2020 at 8:17

Always Helping

14.6k4 gold badges16 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

kavya Over a year ago

I want li items to be displayed all the time.Only the checkboxes should be shown and hidden

Always Helping Over a year ago

@kavya See my updated answer. working as you wanted.

kavya Over a year ago

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

Always Helping Over a year ago

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

kev.proxbit · Accepted Answer · 2020-09-02 08:26:33Z

1

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

answered Sep 2, 2020 at 8:26

kev.proxbit

1061 silver badge4 bronze badges

Comments

Saniya syed qureshi · Accepted Answer · 2020-09-02 08:51:43Z

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 2, 2020 at 8:51

answered Sep 2, 2020 at 8:18

Saniya syed qureshi

3,1973 gold badges18 silver badges23 bronze badges

1 Comment

Always Helping Over a year ago

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

Tafadzwa Chimberengwa · Accepted Answer · 2020-09-02 08:44:04Z

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>

Collectives™ on Stack Overflow

enable and disable checkbox based on toggle of Custom toggle Switch

4 Answers 4

4 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related