Выберите все элементы в ul li с включенным пользовательским переключателем

ProgramBox

Выберите все элементы в ul li с включенным пользовательским переключателем

Post author:admin
Запись опубликована:2 апреля, 2023
Post category:Вопросы по программированию

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

Я хочу создать пользовательский переключатель, который при включении будет выбирать все элементы 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>

1. Что именно вы подразумеваете под «выбором» li s? Они являются элементами списка, поэтому их нельзя выбрать по умолчанию, и вы, похоже, не добавляете какой-либо код для выполнения какого-либо выбора? Пожалуйста, отредактируйте свой вопрос, чтобы точно объяснить, что вы пытаетесь сделать, чтобы мы могли помочь

2. извините. Я обновил код с выбором списка

Ответ №1:

Вы можете использовать forEach функцию и querySelectorAll метод, чтобы получить все ul > li и применить выбранный класс, который вы переключаете своим переключателем.

Вам необходимо event delegation в этом, так как elements они динамически добавляются в DOM

Если переключатель включен и выключен, вы можете проверить это с помощью функции jQuery is и атрибута :checked

Редактировать: Поскольку вы добавили, что хотите выполнить множественный выбор, удерживая control клавишу, а затем click выполнить multi selection аналогично, Un-selection нажав Ctrl key

Живая демонстрация:

 $(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: defau<
}

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

1. Спасибо.. Я хотел также добавить множественный выбор и отмену выбора, из-за чего я застрял

2. @kavya Я предоставил ответ, основанный на заданном вопросе => Выберите все элементы в ul li с включенным пользовательским переключателем — Дайте мне знать — я не уверен, что вы подразумеваете под множественным выбором

3. ДА.. Я спросил в описании о том, что выбор всех и множественный выбор вместе вызывают у меня трудности

4. множественный выбор — это выбор более одного элемента списка при нажатой клавише ctrl .. аналогично отмене выбора при нажатой клавише ctrl

5. @kavya Смотрите мой обновленный ответ — теперь вы можете выбрать их, нажав control клавишу и нажав на выбор, чтобы добавить класс.

Ответ №2:

Попробуйте вот так

 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>

Надеюсь, будет полезно