1

У меня есть код на js -

function getCheckedCheckBoxes() {
  var checkboxes = document.getElementsByClassName('checkbox');
  var checkboxesChecked = []; // можно в массиве их хранить, если нужно использовать 
  for (var index = 0; index < checkboxes.length; index++) {
     if (checkboxes[index].checked) {
        checkboxesChecked.push(checkboxes[index].value); // положим в массив выбранный
        $('.otvet1').html(checkboxes[index].value); // делайте что нужно - это для наглядности
     }
  }
  return checkboxesChecked; // для использования в нужном месте
}

И

<label class="radiotext"><input name="spisok" class="checkbox" type="checkbox" value="checkbox1" id="checkbox1" value="HTML">HTML</label> <label class="radiotext"><input name="spisok" class="checkbox" type="checkbox" value="checkbox2" id="checkbox2" value="CSS">CSS</label> <label class="radiotext"><input name="spisok" class="checkbox" type="checkbox" value="checkbox3" id="checkbox3" value="SASS">SASS</label> <label class="radiotext"><input name="spisok" class="checkbox" type="checkbox" value="checkbox4" id="checkbox4" value="JS">JS</label> <label class="radiotext"><input name="spisok" class="checkbox" type="checkbox" value="checkbox5" id="checkbox5" value="BOOTSTRAP">BOOTSTRAP</label> <button onclick="getCheckedCheckBoxes()"> Кто выбран? </button>

введите сюда описание изображения Он выводит только один текст. Как сделать чтобы выводил несколько?

1
  • Во первых покажите, как вы полученный результат отрисовываете(в вопросе не нашел), где появляется только одно значение и во вторых у вас ошибка в ваших input -> тег value присутствует 2 раза.
    – SwaD
    31 окт 2022 в 12:21

2 ответа 2

1

С помощью querySelectorAll можно сразу достать выбранные чекбоксы

function getCheckedCheckBoxes() {
  let checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
  let checkboxesArray = [];
  output.textContent = '';

  for (let i = 0, n = checkboxes.length; i < n; i++) {
    checkboxesArray.push(checkboxes[i].value);
    output.innerHTML += checkboxes[i].value + '<br>';
  }
  return checkboxesArray;
}
<label class="radiotext">
    <input name="spisok" class="checkbox" type="checkbox" id="checkbox1" value="HTML">HTML
</label>
<label class="radiotext">
    <input name="spisok" class="checkbox" type="checkbox" id="checkbox2" value="CSS">CSS
</label>
<label class="radiotext">
    <input name="spisok" class="checkbox" type="checkbox" id="checkbox3" value="SASS">SASS
</label>
<label class="radiotext">
    <input name="spisok" class="checkbox" type="checkbox" id="checkbox4" value="JS">JS
</label>
<label class="radiotext">
    <input name="spisok" class="checkbox" type="checkbox" id="checkbox5" value="BOOTSTRAP">BOOTSTRAP
</label>

<button onclick="getCheckedCheckBoxes()"> Кто выбран?</button>

<div id="output"></div>

0

В Вашем примере конструкция $('.otvet1').html(checkboxes[index].value); при каждом выполнении перезаписывает содержимое элемента вывода otvet1, поэтому и выводится только значение самого последнего отмеченного чекбокса.

Так как в примере есть массив со значениями всех выбранных чекбоксов checkboxesChecked, то можно просто вывести значения, добавленные в него в результате выполнения цикла.

function getCheckedCheckBoxes() {
  var checkboxes = document.getElementsByClassName('checkbox');
  var checkboxesChecked = []; 
  for (var index = 0; index < checkboxes.length; index++) {
     if (checkboxes[index].checked) {
        checkboxesChecked.push(checkboxes[index].value);
     }
  }
  $('.otvet').html(checkboxesChecked.map((item) => `<p>${item}</p>`));
  
  return checkboxesChecked;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="radiotext"><input name="spisok" class="checkbox" type="checkbox" value="checkbox1" id="checkbox1" value="HTML">HTML</label>
<label class="radiotext"><input name="spisok" class="checkbox" type="checkbox" value="checkbox2" id="checkbox2" value="CSS">CSS</label>
<label class="radiotext"><input name="spisok" class="checkbox" type="checkbox" value="checkbox3" id="checkbox3" value="SASS">SASS</label>
<label class="radiotext"><input name="spisok" class="checkbox" type="checkbox" value="checkbox4" id="checkbox4" value="JS">JS</label>
<label class="radiotext"><input name="spisok" class="checkbox" type="checkbox" value="checkbox5" id="checkbox5" value="BOOTSTRAP">BOOTSTRAP</label>
<button onclick="getCheckedCheckBoxes()"> Кто выбран? </button>
<div class="otvet"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.