Select all items in ul li with custom toggle switch on

Question

I want to create a custom toggle switch which when turned on it will select all elements of ul li and when off unselectes all elemets of ul li .similarly individual selection and multi selection and unselection should also work on list elements.stuck up with all these functionality together plz help.

 $('#projects-menu').append("<li value='sales1' class='disabled'>Sales 1</li>") $('#projects-menu').append("<li value='sales2'>Sales 2</li>") $('#projects-menu').append("<li value='sales3'>Sales 3</li>") $('#projects-menu').on('click', 'li', function() { $("#projects-menu li").removeClass('selected'); $(this).addClass('selected'); })

 ul.menu { margin-top: 30px; list-style-type: none; } ul.menu li { background-color: #e0e0e0; padding: 8px 12px; border: solid 2px white; cursor: pointer; border: 3px solid #FFFFFF; border-radius: 10px; } ul.menu li:hover { background-color: #A9A9A9; } ul.menu li.selected { background-color: #23ac61; } ul.menu li.disabled:hover { background-color: #e0e0e0; cursor:default; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="projects"> <ul class="menu" id="projects-menu"> </ul> </div> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input switchc" id="customSwitch2" checked> <label class="custom-control-label" for="customSwitch2">Toggle me</label> </div>

Answer 1

Try like this

 function check_uncheck_checkbox(isChecked) { if(isChecked) { $('input[name="language"]').each(function() { this.checked = true; }); } else { $('input[name="language"]').each(function() { this.checked = false; }); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="divCheckAll"> <input type="checkbox" name="checkall" id="checkall" onClick="check_uncheck_checkbox(this.checked);" />Check All</div> <br/> <div id="divCheckboxList"> <div class="divCheckboxItem"><input type="checkbox" name="language" id="language1" value="English" />English</div> <div class="divCheckboxItem"><input type="checkbox" name="language" id="language2" value="French" />French</div> <div class="divCheckboxItem"><input type="checkbox" name="language" id="language3" value="German" />German</div> <div class="divCheckboxItem"><input type="checkbox" name="language" id="language4" value="Latin" />Latin</div> </div>

Hope will helpful

Answer 2

You can use forEach function and querySelectorAll method to get all the ul > li and apply selected class which you toggle your switch.

You need to event delegation in this since the elements are added dynamically to the DOM

If the toggle is ON and OFF you can checked this using jQuery is function and :checked attribute

Edit: Since you have added that you want to do multi selection via holding onto control key and then click to do multi selection and similarly the Un-selection with Ctrl key pressed

Live Demo:

 $(document).ready(function() { $('#projects-menu').append("<li value='sales1'>Sales 1</li>") $('#projects-menu').append("<li value='sales2'>Sales 2</li>") $('#projects-menu').append("<li value='sales3'>Sales 3</li>") $(document).on('click', '#projects-menu > li', function(event) { event.preventDefault(); if (event.ctrlKey) { if ($(this).hasClass('selected')) { $(this).removeClass('selected'); } else { $(this).addClass("selected"); } } else { $("#projects-menu > li").removeClass("selected"); $(this).addClass("selected"); } }); let getCheckboxes = document.querySelectorAll('#projects-menu > li') //get checkboxes UL $(document).on('change', '#customSwitch2', function() { var $this = $(this) getCheckboxes.forEach(function(o) { if ($this.is(':checked')) { $(o).addClass('selected'); } else { $(o).removeClass('selected'); } }) }) })

 ul.menu { margin-top: 30px; list-style-type: none; } ul.menu li { background-color: #e0e0e0; padding: 8px 12px; border: solid 2px white; cursor: pointer; border: 3px solid #FFFFFF; border-radius: 10px; } ul.menu li:hover { background-color: #A9A9A9; } ul.menu li.selected { background-color: #23ac61; } ul.menu li.disabled:hover { background-color: #e0e0e0; cursor: default; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" /> <div class="projects"> <ul class="menu" id="projects-menu"> </ul> </div> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input switchc" id="customSwitch2"> <label class="custom-control-label" for="customSwitch2">Toggle me</label> </div>