1

Добрый день,есть несколько чекбоксов,задача состоит в том,чтобы при клике на чекбокс ниже создавался div-блок с названием соответствующим отмеченному чекбоксу. Попытался сделать,при клике по одному чекбоксу создается строка как положено,но если кликаешь по второму,то создается еще 2 строки, т.е по строке за каждый отмеченный чекбокс,подскажите,пожалуйста,что не так делаю? Так же,если отключаем чекбокс,то строка должна удаляться.

$(".option-item input").on("change", function(){
        addCheckOption();
    });




function addCheckOption() {

        $(".option-item input").each(function () {

          
            var optionTitle = $(this).data('name');

            var optionList = document.getElementById('check-option-block');
            var optionItem = document.createElement('div');
            var optionNameBlock = document.createElement('div');
            var optionName = document.createTextNode(optionTitle);
          


            optionNameBlock.className = 'option-name-block col-sm-9 col-xs-12 ';
            optionItem.className = 'option-block-row row';

            if ($(this).is(":checked")) {

                optionNameBlock.appendChild(optionName);
                optionItem.appendChild(optionNameBlock);
                optionList.appendChild(optionItem);

            } else {
                $(optionItem).remove();
              
            }


        });


    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="option-item">
    <input type="checkbox"  id="check1"  data-name='Питер'/>
    <label for="check1"><span></span><strong id='test'>Питер</strong></label>
</div>

<div class="option-item">
	<input type="checkbox"  id="check2"   data-name='Москва'/>
	<label for="check2"><span></span><strong>Москва</strong></label>
</div>

<div id="check-option-block"></div>

1 ответ 1

0

Вы поверяете каждый раз все выделенные чекбоксы строка $(this).is(":checked"); Если он активен, то добавляете его в список и не очищаете его.

Можно перед записью изменений очищать блок «check-option-block».

$(".option-item input").on("change", function(){
        addCheckOption();
    });




function addCheckOption() {
        document.getElementById('check-option-block').innerHTML = "";
        $(".option-item input").each(function () {

          
            var optionTitle = $(this).data('name');

            var optionList = document.getElementById('check-option-block');
            var optionItem = document.createElement('div');
            var optionNameBlock = document.createElement('div');
            var optionName = document.createTextNode(optionTitle);
          


            optionNameBlock.className = 'option-name-block col-sm-9 col-xs-12 ';
            optionItem.className = 'option-block-row row';

            if ($(this).is(":checked")) {

                optionNameBlock.appendChild(optionName);
                optionItem.appendChild(optionNameBlock);
                optionList.appendChild(optionItem);

            } else {
                $(optionItem).remove();
              
            }


        });


    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="option-item">
    <input type="checkbox"  id="check1"  data-name='Питер'/>
    <label for="check1"><span></span><strong id='test'>Питер</strong></label>
</div>

<div class="option-item">
	<input type="checkbox"  id="check2"   data-name='Москва'/>
	<label for="check2"><span></span><strong>Москва</strong></label>
</div>

<div id="check-option-block"></div>

Или просто удалять все элементы через removeChield. Или проверять перед добавлением есть ли такой блок уже

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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