Блог

Главная - Вопросы по программированию - Как проверить и снять группу флажков с помощью JavaScript?

Как проверить и снять группу флажков с помощью JavaScript?

#javascript #html

Вопрос:

Я только начал изучать JavaScript, и я пытаюсь решить мою проблему, у меня есть группа флажков, моя цель состоит в том, чтобы проверить все флажки и войти флажки данных, значения атрибутов, который работает в моем коде, но проблема в том, когда я хочу отменить выбор всех из них ясно, вошедших данные, или просто уберите одно из них и удалить эти данные из checkedItems массива данных добавляется к существующему checkedItems массиву. заранее спасибо

 var checkedItems = [];

function check() {
  var checkboxes = document.querySelectorAll('.checkboxes');
  for (var i = 0; i < checkboxes.length; i  ) {
    checkboxes[i].checked = false;
    if (checkboxes[i].type == "checkbox") {
      if (!checkboxes[i].checked) {
        checkboxes[i].checked = true;
        checkedItems.push(checkboxes[i].getAttribute('data-value'));
      } else {
        checkboxes[i].checked = false;
        checkedItems = [];
      }
    }
  }

  console.log(checkedItems)
}



function checkSingle(e) {
  checkedItems.push(e.target.getAttribute('data-value'))
  console.log(checkedItems)
} 
 <input type="checkbox" id="checkAll" onchange="check()">
<label for="vehicle1"> check all</label><br>
<input type="checkbox" id="vehicle1" class="checkboxes" onchange="checkSingle(event)" name="vehicle1" value="Bike" data-value="50">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" class="checkboxes" value="Car" onchange="checkSingle(event)" data-value="60">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" class="checkboxes" name="vehicle3" onchange="checkSingle(event)" value="Boat" data-value="60">
<label for="vehicle3"> I have a boat</label><br>

Ответ №1:

 var checkedItems = [];

function check(e) {
    var checkAll = e.target.checked;
    var checkboxes = document.querySelectorAll('.checkboxes');
    for (var i = 0; i < checkboxes.length; i  ) {
        //checkboxes[i].checked = false;
        if (checkboxes[i].type == "checkbox") {
            if (!checkboxes[i].checked amp;amp; checkAll) {
                checkboxes[i].checked = true;
                checkedItems.push(checkboxes[i].getAttribute('data-value'));
            } else if(!checkAll) {
                checkboxes[i].checked = false;
                checkedItems = [];
            }
        }
  }
  console.log(checkedItems)
}

function checkSingle(e) {
    var value =  e.target.getAttribute('data-value');
    if(e.target.checked==false){
        checkedItems.splice(checkedItems.indexOf(value),1);
    } else{
        checkedItems.push(value)
    }
    console.log(checkedItems)
} 
 <input type="checkbox" id="checkAll" onchange="check(event)">
<label for="vehicle1"> check all</label><br>
<input type="checkbox" id="vehicle1" class="checkboxes" onchange="checkSingle(event)" name="vehicle1" value="Bike" data-value="50">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" class="checkboxes" value="Car" onchange="checkSingle(event)" data-value="60">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" class="checkboxes" name="vehicle3" onchange="checkSingle(event)" value="Boat" data-value="60">
<label for="vehicle3"> I have a boat</label><br>

JsFiddle

Ответ №2:

Ты идешь через ручей за водой. 🙂 Просто просмотрите их все, чтобы проверить их или снять флажок.

Если вы хотите получить данные, если вы хотите отправить форму, просто выполните запрос. Нет необходимости хранить переменные, когда вы можете связаться с ними '.checkboxes:not([id="checkAll"])' , что означает, что вы исключаете #checkAll флажок.

Я также изменил это:

 <label for="vehicle1"> check all</label>

К этому:

 <label for="checkAll"> check all</label>

Также лучше добавлять списки событий с помощью кода javascript, чем добавлять их в качестве атрибутов в HTML-элементы.

 let allCheckbox = document.getElementById('checkAll');

function checkAll(isChecked) {  
  var checkboxes = document.querySelectorAll('.checkboxes:not([id="checkAll"])');
  
  for (var i = 0; i < checkboxes.length; i  ) {
    checkboxes[i].checked = isChecked;
  }
}

allCheckbox.addEventListener('change', (event) => {
  checkAll(event.currentTarget.checked);
}); 
 label {
  cursor: pointer;
} 
 <input type="checkbox" id="checkAll">
<label for="checkAll"> check all</label><br>
<input type="checkbox" id="vehicle1" class="checkboxes" name="vehicle1" value="Bike" data-value="50">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" class="checkboxes" value="Car"  data-value="60">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" class="checkboxes" name="vehicle3" value="Boat" data-value="60">
<label for="vehicle3"> I have a boat</label><br>
Метки: