How to toggle display of checkboxes

[RaviCKota]

Hi All,


I have a table with two columns. I would not be having any information about the total rows the table can have. I get the cound from a servlet, and I can loop through and generate individual rows. Now for each row, the first column would have a checkbox. Now I too have some checkboxes (>=0 for each row, based on some conditions). But the checkboxes on the second column should not be visible unless, the corresponding checkbox of the first column is selected. I'm trying to achieve this. Can some one help me out with this problem. This sounds to be very simple to me, but missing some link. Its been a quite long time I actually did something using javascript.

[RaviCKota]

Hello All,

I have forgotten to say that, my web page is generated by a jsp page.

Thanks
Ravi

[rangana]

Show us your code or provide a link to the page. We ca'nt help without seeing any of the code.

[RaviCKota]

Hi All,

Please find the code below ....

<form name="myForm" action="CommonPayment.do" method="POST">
<input type="hidden" name="indicator" value="PageTwo"/>
<table bordercolor="white" cellspacing="1" border="2" cellpadding="=2" width="800" height="430">
<tr>
<th width="400" align="center"> <b>Test Suite Names </b> </th>
<th width="400" align="center"> <b>Test Mode Names </b> </th>
</tr>
<% for(int i=0;i<suiteNames.size();i++){
tempSuiteName=(String)suiteNames.get(i);
%>
<tr>
<td width="400">
<input type="checkbox" name="<%=tempSuiteName%>"/><%=tempSuiteName%>
</td>
<td width="400" >
<%
tempMode=new ArrayList();
modeNames=(ArrayList)modeMap.get((String)suiteNames.get(i));
for(int j=0;j<modeNames.size();j++){
tempModeName=(String)modeNames.get(j);%>
<input type="checkbox" name="<%=tempModeName%>" onclick=""/><%=tempModeName%>
<%}%>
</td>
</tr>
<%}%>
</table>


Now as you see above, I have rows generated based on the value I get from servlet into the jsp and the number of checkboxes in the second column also depends on the data received from servlet.

I'm looking at how to toggle the display/visibility of the entire second column based on the check status of the column one. To put it simple, if I select the checkbox which is in bold red, then the checkbox(es) of second column which are in bold blue should be displayed. If I uncheck the check box of bold red, then bold blue should be hidden.

Even If I could disable the checkboxes of second column, it works fine for me.

Can some one guide me on this now.

[jscheuer1]

I'm not sure exactly how all of the jsp part would work out (how the first loop's code before writing a single red checkbox would need to be added to), but if I understand what you are after, you would need to have tempModeName available when the red checkboxes are generated as well as when the blue ones are, and it would have to be the same value at each point in the two loops. If you can arrange that, for the red ones, do:

<input type="checkbox" onclick="this.form.elements['<%=tempModeName%>'].style.display=this.checked? '' : 'none';" name="<%=tempSuiteName%>"/><%=tempSuiteName%>

That would allow the blues ones to appear when the corresponding red ones are checked, provided they are already unseen (code to do that for the blue ones):

<input style="display:none;" type="checkbox" name="<%=tempModeName%>" onclick=""/><%=tempModeName%>

[RaviCKota]

John,

U helped me here a lot. Actually with the guidance provided and some more research, I was able to accomplish this with the below code

<tr>
<td width="400">
<input type="checkbox" onclick="toggle(this,'<%=tempSuiteName%>')"/><%=tempSuiteName%>
</td>
<td width="400" id="<%=tempSuiteName%>" style="visibility:hidden">
<%
tempMode=new ArrayList();
modeNames=(ArrayList)modeMap.get((String)suiteNames.get(i));
for(int j=0;j<modeNames.size();j++){
tempModeName=(String)modeNames.get(j); %>
<input type="checkbox" name="<%=tempModeName%>" /><%=tempModeName%>
<%}%>
</td>
</span>
</tr>
<%}%>

<script type="text/javascript">
function toggle(object,group) {
document.getElementById('submit').disable=false
var visSetting = (object.checked) ? "visible" : "hidden"
document.getElementById(group).style.visibility = visSetting
}
</script>

Basically I identified the entire <td> of the second column with the name of first column.

Though my logic is looking lame, it worked for me ..

Thanks a ton John.