Use JQuery to target div container for hide/show div without using ID's

Question

I have a script below and wanted to target the show/hide div as the check boxes are clicked without using ID's and restricting the hide/show feature within each container. Any suggestions?

Here is the fiddle. http://jsfiddle.net/45NRN/2/

And here is the jquery code.

$('.c-input').live('change', 'checkbox', function() {
    var target = $(this).prev('.showHideDiv');
    if ($(this).find('input:checked').length == 0) {
        target.hide();
    } else {
        target.show();
    }
});

Answer 1

This should do the trick

$('.c-input').live('change', ':checkbox', function() {
    var target = $(this).closest('.c-input').prev().find('.showHideDiv');
    if ($(this).find('input:checked').length == 0) {
        target.hide();
    } else {
        target.show();
    }
});

DEMO

Some comments:

• Replaced 'checkbox' by ':checkbox' . Your selector finds tags with name checkbox ( <checbox\\> ,that's not what you're looking for
• this in your context is the checkbox and not the .c-input element. I changed the related selector to reflect this.

Answer 2

Or you could do this Working demo :- ) http://jsfiddle.net/P8UFL/

• Issue was you are using .prev for the element which is inside another div --> wrap

Hence, to traverse through it correctly you probably need to do the prev on wrap and then find showHideDiv

• Also HTML is bit invalid > chuck in /> with your checkboxes tag.

• .live is depricated from 1.7 > Jquery version; alternative is .on just a note.

Hope this helps :)

Code

  var target = $(this).prev('.wrap').find(".showHideDiv");