Question

I have multiple sets of checkboxes that show/hide a div based on which checkbox is checked. This can be done with IDs but I will have multiple sets of these on the same page and need a more generic selector such as a class or selecting closest elements to the checkbox.

Maybe someone knows why this is not selecting correctly or knows a better way?
http://jsfiddle.net/infatti/h3rh7/

$('.check-hide-show-content').hide(); // hide all content divs

// begin show/hide
$('.check-hide-show input:checkbox').click(function () {

    $(this).parent().next('.check-hide-show-content').show();


    $(".check-hide-show input[type='checkbox']").not(this).prop("checked", false); // uncheck the other checkbox when this is checked
});

Answer 1

pretty simple:

$('.check-hide-show-content').hide(); // hide all content divs

// begin show/hide
$('.check-hide-show input:checkbox').change(function () {
    $('.check-hide-show-content').hide().eq($(this).index('.check-hide-show input:checkbox')).show();
    $(".check-hide-show input[type='checkbox']").not(this).prop("checked", false); // uncheck the other checkbox when this is checked
});