связывание HTML-флажка с элементом, который нужно скрыть, когда флажок снят

Question

Какой хороший шаблон для добавления дополнительных данных в элемент HTML? Например, я хотел бы связать флажок с HTML, который я хотел бы скрыть, когда флажок снят. Как и атрибут for элемента label, я хочу указать связь в разметке, чтобы я мог написать простой, общий сценарий для перебора всех флажков и подключить обработчик событий jquery для скрытия / отображения.

Например, в этом HTML:

<input type="checkbox" id="showFoo" />
<div id="foo">
    Some HTML here. Hide this when the checkbox is unchecked.
</div>

Что хорошего в том, чтобы мой сценарий знал, что #showFoo относится к #foo? В идеале это то, что не делает мой HTML неподтвержденным или не требует от меня использования определенного соглашения об именах для идентификаторов. Дополнительный кредит, если он делает мой сценарий более эффективным.

Answer 1

используйте атрибут data-[key], чтобы определить, что #showFoo должно контролировать

пример jsfiddle

HTML:

<input type="checkbox" id="showFoo" data-toggles="foo" />
<div id="foo">
    Some HTML here. Hide this when the checkbox is unchecked.
</div>

jQuery:

$('#showFoo').change(function() {
    $('#' + $(this).data('toggles')).toggle();
});

Answer 2

Это похоже на идеальный случай для элементов данных.

<input type="checkbox" id="showFoo" data-relateddiv="foo" />

Затем в обработчике событий на флажках:

$('#' + $(this).data("relateddiv")).show();

Answer 3

Я использую это в настоящее время

element.each(function(i, e) {  
            var checked = $(e).prop('checked'),
                foo = */Relationship betweeen element and foo*/;
            foo .toggleClass('invisibleClass', checked)
                .toggleClass('visibleClass', !checked);
        });

в случае, если у вас есть несколько foos и элементов (сначала вы должны определить отношения между ними)

Запустите его на событие по вашему выбору

Answer 4

Вы можете использовать атрибут "rel"

<input type="checkbox" id="showFoo" rel="foo" />

$('#showFoo').click(function(){
  var element_id = $(this).attr('rel');
  var element = $('#'+element_id);
  if(element.is(':hidden')){
    element.slideDown();
    //element.show();
  }
  else{
    element.slideUp();
    //element.hide();
  }
});

Answer 5

Попробуйте ниже

if (checkboxIsChecked) {
foo.visibility:visible;
} else {
foo.visibility:hidden;
}