I have written a javascript function.

function wellChecked(state) {
if (state)
{
wellDropDown.style.visibility = 'visible';
}
else
{
wellDropDown.style.visibility = 'hidden';
}
}

I have a checkbox after the Well Modification <td> as given below,

<tr>
  <td>On Call</td>
  <td><html:checkbox property="onCall"/></td>
  <td>Well Modification</td>
  <td><input type="checkbox" onclick="wellChecked(this.checked)" /></td>
</tr>

When that checkbox is clicked I want the drop down list given under the div id=wellDropDown to be displayed. Defaultly, if the check box is not clicked, the drop down should not be displayed.

<tr>
  <td>Active</td>
  <td><html:checkbox property="active"/></td>
<div id="wellDropDown" style="visibility:hidden;">
  <td>     
    <html:select property="wellFormatId">
    <html:option value="">(Select)</html:option>
    <bean:define id="wellFormatColl"  name="wellFormats" scope="request"/>
    <logic:iterate id="wellFormats" name="wellFormatColl" indexId="index" type=".astrazenecapis.data.WellFormatVO">
        <% Long wellId = wellFormats.getWellFormatId();%>
        <% String wellIdNo = wellId.toString(); %>
        <html:option value="<%=wellIdNo%>">
        <bean:write name="wellFormats" property="wellFormatName"/>
        </html:option>
    </logic:iterate>
    </html:select>
  </td>
 </div>
</tr>

When I tried executing this code, I could see the drop down list getting displayed irrespective of the checkbox checked or not.

Where I have went wrong in this scenario? Please give ur suggestions or ways to implement my requirement.

I have written a javascript function.

function wellChecked(state) {
if (state)
{
wellDropDown.style.visibility = 'visible';
}
else
{
wellDropDown.style.visibility = 'hidden';
}
}

I have a checkbox after the Well Modification <td> as given below,

<tr>
  <td>On Call</td>
  <td><html:checkbox property="onCall"/></td>
  <td>Well Modification</td>
  <td><input type="checkbox" onclick="wellChecked(this.checked)" /></td>
</tr>

When that checkbox is clicked I want the drop down list given under the div id=wellDropDown to be displayed. Defaultly, if the check box is not clicked, the drop down should not be displayed.

<tr>
  <td>Active</td>
  <td><html:checkbox property="active"/></td>
<div id="wellDropDown" style="visibility:hidden;">
  <td>     
    <html:select property="wellFormatId">
    <html:option value="">(Select)</html:option>
    <bean:define id="wellFormatColl"  name="wellFormats" scope="request"/>
    <logic:iterate id="wellFormats" name="wellFormatColl" indexId="index" type=".astrazeneca.pis.data.WellFormatVO">
        <% Long wellId = wellFormats.getWellFormatId();%>
        <% String wellIdNo = wellId.toString(); %>
        <html:option value="<%=wellIdNo%>">
        <bean:write name="wellFormats" property="wellFormatName"/>
        </html:option>
    </logic:iterate>
    </html:select>
  </td>
 </div>
</tr>

When I tried executing this code, I could see the drop down list getting displayed irrespective of the checkbox checked or not.

Where I have went wrong in this scenario? Please give ur suggestions or ways to implement my requirement.

• java
• javascript
• jsp
• html

• 1 wellDropDown - this is used in your js function, but where is it defined? – Manish Commented Jan 3, 2012 at 10:51
• I atleast think you need to use document.getElementById('id-here').style.visibility = 'hidden/visible'; instead of wellDropDown. – lfxgroove Commented Jan 3, 2012 at 10:52
• @ManishSharma wellDropDown is the id attribute of the div tag – LGAP Commented Jan 3, 2012 at 10:57

2 Answers 2

Your HTML is invalid. You may not have a div enclose a td like this. Either make the td itself visible or invisible, or put the div inside the td, instead of putting it around the td.

Also, unless wellDropDown is a global JS variable, the code should be

document.getElementById("wellDropDown").style.visibility = 'visible';

with jquery you could do this :

    <tr>
      <td>On Call</td>
      <td><html:checkbox property="onCall"/></td>
      <td>Well Modification</td>
      <td><input type="checkbox" id="myCheckBox" /></td>
    </tr>
...

<script>
$('#myDropDown').click(
  function () {             
    $("#wellDropDown").toggle();    
  });
);
</script>