Question

How can I have additional data on 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>

How can I 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.

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();
});