1

Мне нужно записать переменную в div, У меня есть 2 checkbox которые записываются отдельно каждый в div. Но почему-то оба чекбоксы записываются в первый div, а не первый check = первый div, второй check = второй div.

 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); // положим в массив выбранный
             document.getElementsByClassName('note-editable')[0].innerHTML  +=checkboxes[index].value;
         }
     } 
     return checkboxesChecked; // для использования в нужном месте
 }

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

Хоть я и задаю getElementsByClassName('note-editable')[1],но все равно записывает в первый div. Где я допустил ошибку?

0

1 ответ 1

1

Вам нужно регистрировать event'ы нажатия на чекбокс (addEventListener()).

То есть, в массив checkboxes собираем чекбоксы, которые у нас есть, и потом в цикле для каждого регистрируем event 'click'. Биндим вложенную функцию (замыкание) bindClick, чтобы получить index, и записываем значение чекбокса в div с таким же индексом, что и у текущего чекбокса (если он чекнут). Если отчекнут - очищаем поле соответствующего div'a.

getCheckedCheckBoxes();
function getCheckedCheckBoxes() {
    var checkboxes = document.getElementsByClassName('checkbox');

    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].addEventListener('click', bindClick(i));
    }

    function bindClick(i) {
        return function () {
            this.checked
                ? document.getElementsByClassName('note-editable')[i].innerHTML = this.value
                : document.getElementsByClassName('note-editable')[i].innerHTML = ''
        };
    }
}
<div>
    <input type="checkbox" class="checkbox">
    <input type="checkbox" class="checkbox">
</div>

<div>
    <div class="note-editable"></div>
    <div class="note-editable"></div>
</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.

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