javascript for checkboxes in a table to get visible or not visible(asp.net control)

[cvijaykrishna]

hi,
i have all elements(mostly chevkboxes) inside a table.if i check a check box the remaining checkboxes under it(placed in table) should be visible .i need to develop it in javascript pls help me out

sample code to give brief intro of my structure

 
<table id="TABLE1" rules="none" runat="server" width="100%" >
<tr>
<td bgcolor="#6699ff" colspan="2">
<asp:CheckBox ID="cbxProblemsEncounteredDuringSurgery" runat="server" 
Text="Problems Encountered During Surgery" AutoPostBack="True" /></td>
</tr>
<tr>
<td colspan="2">
<table width="100%">
<tr>
<td>
<asp:CheckBox ID="cbxConversionfromendoscopetoopenprocedure" runat="server" Text="Conversion from endoscope to open procedure" AutoPostBack="True" /></td>
<td>
<asp:CheckBox ID="cbxHemorrhage" runat="server"
Text="Hemorrhage" AutoPostBack="True" /></td>
</tr>
<tr>
<td>
<asp:CheckBox ID="cbxProlongedsurgerybeyondavgduration" runat="server" Text="Prolonged surgery beyond avg.duration" AutoPostBack="True" /></td>
<td>
<asp:CheckBox ID="cbxUnplannedprocedurerequiringchangeofanaestheticplan" runat="server" Text="Unplanned procedure requiring change of anaesthetic plan" AutoPostBack="True" /></td>
</tr>
</table>
</td>
</tr>
</table>
 

if Problems Encountered During Surgery is checked then other elements in below "tr" which are again placed in a table must be enabled.ie dynamically visible

[cvijaykrishna]

hi,
i have all elements(mostly chevkboxes) inside a table.if i check a check box the remaining checkboxes under it(placed in table) should be visible .i need to develop it in javascript pls help me out

sample code to give brief intro of my structure


<table id="TABLE1" rules="none" runat="server" width="100%" >
<tr>
<td bgcolor="#6699ff" colspan="2">
<asp:CheckBox ID="cbxProblemsEncounteredDuringSurgery" runat="server"
Text="Problems Encountered During Surgery" AutoPostBack="True" /></td>
</tr>
<tr>
<td colspan="2">
<table width="100%">
<tr>
<td>
<asp:CheckBox ID="cbxConversionfromendoscopetoopenprocedure" runat="server" Text="Conversion from endoscope to open procedure" AutoPostBack="True" /></td>
<td>
<asp:CheckBox ID="cbxHemorrhage" runat="server"
Text="Hemorrhage" AutoPostBack="True" /></td>
</tr>
<tr>
<td>
<asp:CheckBox ID="cbxProlongedsurgerybeyondavgduration" runat="server" Text="Prolonged surgery beyond avg.duration" AutoPostBack="True" /></td>
<td>
<asp:CheckBox ID="cbxUnplannedprocedurerequiringchangeofanaesthe ticplan" runat="server" Text="Unplanned procedure requiring change of anaesthetic plan" AutoPostBack="True" /></td>
</tr>
</table>
</td>
</tr>
</table>


if Problems Encountered During Surgery is checked then other elements in below "tr" which are again placed in a table must be enabled.ie dynamically visible

[r035198x]

hi,
i have all elements(mostly chevkboxes) inside a table.if i check a check box the remaining checkboxes under it(placed in table) should be visible .i need to develop it in javascript pls help me out

sample code to give brief intro of my structure


<table id="TABLE1" rules="none" runat="server" width="100%" >
<tr>
<td bgcolor="#6699ff" colspan="2">
<asp:CheckBox ID="cbxProblemsEncounteredDuringSurgery" runat="server"
Text="Problems Encountered During Surgery" AutoPostBack="True" /></td>
</tr>
<tr>
<td colspan="2">
<table width="100%">
<tr>
<td>
<asp:CheckBox ID="cbxConversionfromendoscopetoopenprocedure" runat="server" Text="Conversion from endoscope to open procedure" AutoPostBack="True" /></td>
<td>
<asp:CheckBox ID="cbxHemorrhage" runat="server"
Text="Hemorrhage" AutoPostBack="True" /></td>
</tr>
<tr>
<td>
<asp:CheckBox ID="cbxProlongedsurgerybeyondavgduration" runat="server" Text="Prolonged surgery beyond avg.duration" AutoPostBack="True" /></td>
<td>
<asp:CheckBox ID="cbxUnplannedprocedurerequiringchangeofanaesthe ticplan" runat="server" Text="Unplanned procedure requiring change of anaesthetic plan" AutoPostBack="True" /></td>
</tr>
</table>
</td>
</tr>
</table>


if Problems Encountered During Surgery is checked then other elements in below "tr" which are again placed in a table must be enabled.ie dynamically visible

You give the tr or td an id then you can use document.getElementById and set that element's style.display = "none".
Try it and post some code.

[acoder]

Do you want to simply hide and make visible or do you actually want to remove and display (in other words, the space taken by the checkboxes is added and removed from the screen)?

[acoder]

I have merged the threads. Please do not double post.

[cvijaykrishna]

I have merged the threads. Please do not double post.

thank u very much . I DID IT ACCIDENTALLY .pls give me code for any sample table of that structure and also actually want to remove and display (in other words, the space taken by the checkboxes is added and removed from the screen)

[cvijaykrishna]

hank u very much . I DID IT ACCIDENTALLY .pls give me code for any sample table of that structure and also actually want to remove and display (in other words, the space taken by the checkboxes is added and removed from the screen)

[acoder]

hank u very much . I DID IT ACCIDENTALLY .pls give me code for any sample table of that structure and also actually want to remove and display (in other words, the space taken by the checkboxes is added and removed from the screen)

I thought you might have done, but I couldn't be sure.

Get the id of the checkboxes and use the following code to display:

document.getElementById(id).style.display='block';

and to hide:

document.getElementById(id).style.display='none';

Replace id with the checkbox ids.

You'll want to trigger this "onclick":
[HTML]<input type="checkbox" onclick="toggleDisplay(this.checked)">[/HTML] "this" refers to the checkbox which you click. checked is a boolean (true/false): whether it is checked or not. Based on that, you can display/remove.

[cvijaykrishna]

i am doing the same thing as directed by u but i need the checboxes to be read only & enabled when i uncheck& check the main checkbox respectively.

sample code

<script language="javascript" type="text/javascript">

function show()
{
document.getElementById ('cbxConversionfromendoscopetoopenprocedure').styl e.display = 'block';
document.getElementById ('cbxHemorrhage').style.visibility = true;
document.getElementById ('cbxProlongedsurgerybeyondavgduration').style.vis ibility = true;
document.getElementById ('cbxUnplannedprocedurerequiringchangeofanaestheti cplan').style.visibility = true;
}

function hide()
{
document.getElementById ('cbxConversionfromendoscopetoopenprocedure').styl e.display='none';
document.getElementById ('cbxHemorrhage').style.display='none';
document.getElementById ('cbxProlongedsurgerybeyondavgduration').style.dis play='none';
document.getElementById ('cbxUnplannedprocedurerequiringchangeofanaestheti cplan').style.display='none';
}
</script>

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
cbxProblemsEncounteredDuringSurgery.Attributes.Add ("Onclick", "javascript:return hide()")



End Sub

Protected Sub cbxProblemsEncounteredDuringSurgery_CheckedChanged (ByVal sender As Object, ByVal e As System.EventArgs) Handles cbxProblemsEncounteredDuringSurgery.CheckedChanged
If (cbxProblemsEncounteredDuringSurgery.Checked = True) Then
cbxProblemsEncounteredDuringSurgery.Attributes.Add ("Onclick", "javascript:return show()")

ElseIf (cbxProblemsEncounteredDuringSurgery.Checked = True) Then
cbxProblemsEncounteredDuringSurgery.Attributes.Add ("Onclick", "javascript:return hide()")
End If


End Sub



-------------------------------------------------------------------------------------------------------------------at page load its not getting enables but after i check the main check box its making the hide function to work.aftyer that even if i check the main checkbox the sub check boxes are not getting enabled

[acoder]

You're mixing and matching the 'display' and 'visible' style properties.

Also, now do you want to enable/disable instead of show/hide?

To set something on page load, set its property to hidden or whatever.

[cvijaykrishna]

ok
all i neeed to is to make the checkboxes checkable (enabled) in one condition and inactive(readonly or uncheckableor disable) in other state.

what command shall i use .

[acoder]

Then use the disabled property. Set it to true or false.

So replace "style.visibility=whatever" or "style.display=whatever" with "disabled=true/false".

[cvijaykrishna]

ok
i tried the below

document.Getelementbyid().style.enabled=true/false;
document.Getelementbyid().style.disabled=true/false;
document.Getelementbyid().enabled=true/false;
document.elementname.disabled=true/false;

but could not get the right answer , which one of the above do u prefer.so that i will give it an another try.
does it depends on the browser to get a specific output.

[acoder]

No, by true/false, I meant either true or false, so if you wanted to enable, you would use disabled=false and for disabling disabled=true. "enabled" doesn't exist.