469,344 Members | 6,443 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,344 developers. It's quick & easy.

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

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

Expand|Select|Wrap|Line Numbers
  1.  
  2. <table id="TABLE1" rules="none" runat="server" width="100%" >
  3. <tr>
  4. <td bgcolor="#6699ff" colspan="2">
  5. <asp:CheckBox ID="cbxProblemsEncounteredDuringSurgery" runat="server" 
  6. Text="Problems Encountered During Surgery" AutoPostBack="True" /></td>
  7. </tr>
  8. <tr>
  9. <td colspan="2">
  10. <table width="100%">
  11. <tr>
  12. <td>
  13. <asp:CheckBox ID="cbxConversionfromendoscopetoopenprocedure" runat="server" Text="Conversion from endoscope to open procedure" AutoPostBack="True" /></td>
  14. <td>
  15. <asp:CheckBox ID="cbxHemorrhage" runat="server"
  16. Text="Hemorrhage" AutoPostBack="True" /></td>
  17. </tr>
  18. <tr>
  19. <td>
  20. <asp:CheckBox ID="cbxProlongedsurgerybeyondavgduration" runat="server" Text="Prolonged surgery beyond avg.duration" AutoPostBack="True" /></td>
  21. <td>
  22. <asp:CheckBox ID="cbxUnplannedprocedurerequiringchangeofanaestheticplan" runat="server" Text="Unplanned procedure requiring change of anaesthetic plan" AutoPostBack="True" /></td>
  23. </tr>
  24. </table>
  25. </td>
  26. </tr>
  27. </table>
  28.  
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
May 3 '07 #1
13 14170
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
May 3 '07 #2
r035198x
13,262 8TB
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.
May 3 '07 #3
acoder
16,027 Expert Mod 8TB
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)?
May 3 '07 #4
acoder
16,027 Expert Mod 8TB
I have merged the threads. Please do not double post.
May 3 '07 #5
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)
May 4 '07 #6
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)
May 4 '07 #7
acoder
16,027 Expert Mod 8TB
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:
Expand|Select|Wrap|Line Numbers
  1. document.getElementById(id).style.display='block';
and to hide:
Expand|Select|Wrap|Line Numbers
  1. 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.
May 4 '07 #8
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
May 15 '07 #9
acoder
16,027 Expert Mod 8TB
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.
May 15 '07 #10
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 .
May 16 '07 #11
acoder
16,027 Expert Mod 8TB
Then use the disabled property. Set it to true or false.

So replace "style.visibility=whatever" or "style.display=whatever" with "disabled=true/false".
May 16 '07 #12
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.
May 16 '07 #13
acoder
16,027 Expert Mod 8TB
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.
May 17 '07 #14

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

reply views Thread by Hong Kong Is A Good Place | last post: by
3 posts views Thread by Al Wilkerson | last post: by
1 post views Thread by Al Wilkerson | last post: by
1 post views Thread by Coach | last post: by
reply views Thread by WJ | last post: by
1 post views Thread by bbcrock | last post: by
reply views Thread by Scott LaChance | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.