选择 ul li 中的所有项目并打开自定义切换开关

Question

我想创建一个自定义切换开关，打开时它将选择 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>

Answer 1

像这样尝试

 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>

希望会有所帮助

Answer 2

您可以使用forEach函数和querySelectorAll方法来获取所有 ul > li 并应用您切换开关的选定类。

您需要在此event delegation ，因为elements是动态添加到DOM

如果切换是打开和关闭，您可以使用 jQuery is function 和:checked属性来检查它

编辑：由于您已添加要通过按住control键进行multi selection ，然后click以进行multi selection ，同样按下 Ctrl key Un-selection

现场演示：

 $(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>