[英]Select all items in ul li with custom toggle switch on
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.我想创建一个自定义切换开关,打开时它将选择 ul li 的所有元素,关闭时取消选择 ul li 的所有元素。同样,单独选择和多选和取消选择也应该适用于列表元素。坚持所有这些功能一起请帮忙。
$('#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>
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希望会有所帮助
You can use forEach
function and querySelectorAll
method to get all the ul > li and apply selected class which you toggle your switch.您可以使用forEach
函数和querySelectorAll
方法来获取所有 ul > li 并应用您切换开关的选定类。
You need to event delegation
in this since the elements
are added dynamically to the DOM
您需要在此event delegation
,因为elements
是动态添加到DOM
If the toggle is ON and OFF you can checked this using jQuery is function and :checked attribute如果切换是打开和关闭,您可以使用 jQuery is function 和:checked属性来检查它
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编辑:由于您已添加要通过按住control
键进行multi selection
,然后click
以进行multi selection
,同样按下 Ctrl key
Un-selection
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.