Question

I have multiple tables on my page that contain a checkbox. Immediately following the table is a div that by default is hidden. I want to show/hide the div depending on the checkbox selection.

Since I have about 10 of these structures, I want to figure out a way to create one click selection to handle any one that is clicked.

The HTML:

<table>  
<input id='cbChecklist1'>  
</table>

<div id='divChecklist1'>  
Show/Hide  
</div>

So I have cbChecklist1-cbChecklist10 and divChecklist1-divChecklist10. When a checkbox in the tab that has cbChecklistX I want it to show/hide the corresponding divChecklistX.

Thanks!

@@@@@@@@@@@@@@@@@@EDIT@@@@@@@@@@@@@@@@@@

I’ve changed the design of my checkboxes and tables and I’m trying to use the slideDown, slideUp methods, but it doesn’t seem like I’m properly selecting my proper <div> — at least it is not sliding the <div> up and down.

2 Questions:
1. Am I properly modifying the <div> selector?
2. How do I debug this to know how the selection is working?

Updated HTML:

<table>  
<input id='cbPressueChecklist'>  
</table>

<div id='divPressueChecklist'>  
Show/Hide  
</div>


<table>  
<input id='cbMechanicalChecklist'>  
</table>

<div id='divMechanicalChecklist'>  
Show/Hide  
</div>

My jQuery Code:

$('input[id$=Checklist]').change(function()  
{  
    var divId = '#div' + this.id.substring(2);  
    if (this.checked)  
        $(divId).slideDown(1500);  
    else  
        $(divId).hide(1500);  
});

Again, thanks.

Answer 1

$('input[id^=cbChecklist]').change(function() {
    var divId = '#divChecklist' + this.id.match(/\d+$/)[0];
    $( divId ).toggle( this.checked );
});

This binds a .change() event handler to <input> elements where the ID attribute starts with cbChecklist.

When a change event occurs, it extracts the number from its ID, and concatenates it to #divChecklist to create the selector.

Then .toggle() is called on the related <div>, passing this.checked as a switch so that if the box is checked, it will show the <div>, otherwise it will hide.