Показать / скрыть определенный div, если флажок типа ввода имеет значение Checked = Checked в нем

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

Обратите внимание, что речь не идет об использовании функции jQuery .click или .change. Они не работают в моем случае.

Я пытаюсь сделать так, чтобы определенный div отображался, если поле флажка имеет значение checked="checked", иначе скройте его.

Я не хочу ничего показывать/скрывать по умолчанию. Я хочу скрыть, только если флажок установлен на unchecked, а если на checked, то div всегда должен отображаться (даже при загрузке страницы).

вот ссылка на Fiddle (подход .click и у меня не работает) https://jsfiddle.net/a5s5s4k3/< /а>

Вы можете заметить, что флажок «Имя» уже установлен, но соседний элемент div по-прежнему скрыт.

Любая помощь будет высоко ценится.

спасибо


checkbox html jquery show-hide oncheckedchanged
person bakar    schedule 27.02.2016    source источник
comment
Либо не скрывайте это текстовое поле, либо удалите отмеченный атрибут из флажка. jsfiddle.net/a5s5s4k3/1   -  person Rajaprabhu Aravindasamy    schedule 27.02.2016
comment
Это потому, что не было инициировано событие click для отображения ввода... Вы всегда можете запустить проверку, как только DOM будет готов...   -  person NewToJS    schedule 27.02.2016
comment
спасибо за комментарии. пожалуйста, посмотрите вопрос еще раз, я отредактировал описание.   -  person bakar    schedule 27.02.2016

Ответы (2)


arrow_upward
2
arrow_downward

Напишите функцию, которая всегда будет проверять состояние флажков и соответственно скрывать и отображать входные данные. И вы можете вызвать эту функцию при готовности документа, а затем при изменении флажков. Обратитесь к приведенному ниже коду

 $(function(){
      formatUI();

    $('input[type="checkbox"]').on('change',function(){
       formatUI();
    });

    function formatUI()
    {
        $.each($('input[type="checkbox"]'),function(){
             if($(this).attr('checked') === 'checked')
             {
               $(this).parent().next('p').show();
             }
             else{
              $(this).parent().next('p').hide();
             }
        });
    }


   });

Вот Рабочая скрипка

person Rajshekar Reddy    schedule 27.02.2016

arrow_upward
2
arrow_downward

Вы можете сделать это с помощью чистого CSS, если хотите немного изменить разметку.

HTML

<p>
  <input type="checkbox" id="" name="" checked="checked" />
  <label>Enable First Name Field</label>
  <input type="text" id="" class="" name="" value="" />
</p>

<p>
  <input class="check2" type="checkbox" id="" name="" />
  <label>Enable Last Name Field</label>
  <input type="text" id="" name="" value="" />
</p>

CSS

input[type=checkbox] + label + input {
  display: none;
}

input[type=checkbox]:checked + label + input {
  display: block;
}

Оператор + выбирает элементы рядом друг с другом. В этом случае мы ориентируемся на ввод рядом с меткой рядом с флажком. Ознакомьтесь с справочником по MDN для родственных селекторов, если вы не знакомы с их. Они очень удобны.

Обновленная скрипта: https://jsfiddle.net/a5s5s4k3/2/

person Sabrina    schedule 27.02.2016
comment
Он также имеет бонус работы, даже если у пользователя отключен javascript. Что-то, что нужно иметь в виду. - person Sabrina; 27.02.2016