linking HTML checkbox with element to hide when checkbox is unchecked

Question

What's a good pattern for adding additional data to an HTML element? For example, I'd like to link a checkbox to HTML I'd like to hide when the checkbox is unchecked. Like the for attribute of a label element, I want to specify the linkage in markup so I can write a simple, generic script to iterate through all checkboxes and hook up a jquery event handler to do the hiding/showing.

For example, in this HTML:

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

What's a good to let my script know that #showFoo is related to #foo? Ideally something that doesn't make my HTML non-validating or and doesn't require me to use a specific naming convention for IDs. Extra credit if it makes my script more efficient.

Answer 1

use a data-[key] attribute to identify what #showFoo should control

example 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

This seems like a perfect case for data elements.

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

Then in an event handler on the checkboxs:

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

Answer 3

You can use the "rel" attribute

<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 4

I use this currently

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

in case you have multiple foos and elements (you have to define the relationship between them first)

Run it on the event of your choice

Answer 5

Try below

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