For a particular requirement of mine, I had to create checkboxes "by hand" and add them to a panel. I could not make use of the CheckboxList control.
To ensure that each chkbox goes to a new line, I had to add a literalcontrol(<br>) after each chckbox that I added.On rendering the chkbox section of the page has this source -
<input id="id0" type="checkbox" name="id0" /><label for="id0">ABC1</label><br>
<input id="id1" type="checkbox" name="id1" /><label for="id1">ABC2</label><br>
<input id="id2" type="checkbox" name="id2" /><label for="id2">ABC3</label><br>
<input id="id3" type="checkbox" name="id3" /><label for="id3">ABC4</label><br>
<input id="id4" type="checkbox" name="id4" /><label for="id4">ABC5</label><br>
Now on click of a client side button I delete the chkboxes that are checked, for this I loop thru the tags of type input determine the boxes tht r cheked and then delete them, this part is fine, the problem comes when I try to get rid of the <br> tags, once I determine that a chkbox needs to b deleted, how do I delete the <br> too that follows it?Can I get the "next element" of a given element, given that I can uniquely identify the input and for tags that I need to delete. How do I uniquely identify the <br> tag that needs to go once a chkbox is removed?
In case ur wondering why I need to remove the <br>, its coz the chkboxes do not move up as the ones above r removed coz the <br>s force them to b rendered on successive lines, so there is a "void" of sorts left behind at all places where I remove the chkboxes.
Pls help me fix this, and again using a Chkboxlist is not an option.
![]() |
0 |
![]() |
What an interesting problem.
The <br /> tag can have an ID: <br id="br1" />
Does that help?
Steve Wellens
My blog
![]() |
0 |
![]() |
Hi Demon try like this
function removeSelected()
{
var tg1 = document.getElementById("cbDiv").getElementsByTagName('input'); var tg2 = document.getElementById("cbDiv").getElementsByTagName('br');for(i=0;i<tg1.length;i++)
{
if(tg1[i].checked){
document.getElementById(
"cbDiv").removeChild(tg1[i]);document.getElementById("cbDiv").removeChild(tg2[i]);}
}
}
<
body> <form id="form1" runat="server"><div id="cbDiv" runat="server">
<input id="id0" type="checkbox" name="id0" /><label for="id0">ABC1</label><br><
input id="id1" type="checkbox" name="id1" /><label for="id1">ABC2</label><br><input id="id2" type="checkbox" name="id2" /><label for="id2">ABC3</label><br><
input id="id3" type="checkbox" name="id3" /><label for="id3">ABC4</label><br><input id="id4" type="checkbox" name="id4" /><label for="id4">ABC5</label><br> </div><
input id="Button2" type="button" value="button" language="javascript" onclick="removeSelected()" /></form> </body>
</
html>
![]() |
0 |
![]() |
Without using <br> tag, it could be a solution for you
Create <span> tag around your <input>and <label> tags
<div> <span><input id="id0" type="checkbox" name="id0" /><label for="id0">ABC1</label></span> <span><input id="id1" type="checkbox" name="id1" /><label for="id1">ABC2</label></span> <span><input id="id3" type="checkbox" name="id3" /><label for="id3">ABC4</label></span> <span></span> <span><input id="id4" type="checkbox" name="id4" /><label for="id4">ABC5</label></span> </div>Use Stylesheet for <span> tagThanks.<style type="text/css"> span{ display:block; }
HOQUE MD.NAZMUL
[document.getReaders]
![]() |
0 |
![]() |
SGWellens:
What an interesting problem.
The <br /> tag can have an ID: <br id="br1" />
Does that help?
Thanks for replying.
Mayb Im asking u a very stupid question, but well I dont know abt it. I had tried in my naivety to assign an id to a Literal control but when it renders, its just a plain <br>.
Here is wat I tried doing -
for( int i = 0;i<5;i++){
CheckBox ckbox = new CheckBox();ckbox.ID =
"id" + i.ToString();ckbox.Text = "ABC";ckbox.EnableViewState = true;newPanel.Controls.Add(ckbox);
LiteralControl litctl = new LiteralControl("<br>");litctl.ID = ckbox.ID + "lit";newPanel.Controls.Add(litctl);
}
Is there a differnt method to assign an id to the br tag, To give u a background, I need the brs to ensure that my chkbxes render on a new line.
Thanks again.
![]() |
0 |
![]() |
sivakl_2001:
Hi Demon try like this
function removeSelected()
{
var tg1 = document.getElementById("cbDiv").getElementsByTagName('input'); var tg2 = document.getElementById("cbDiv").getElementsByTagName('br');for(i=0;i<tg1.length;i++)
{
if(tg1[i].checked){
document.getElementById(
"cbDiv").removeChild(tg1[i]);document.getElementById("cbDiv").removeChild(tg2[i]);}
}
}
<
body> <form id="form1" runat="server"><div id="cbDiv" runat="server">
<input id="id0" type="checkbox" name="id0" /><label for="id0">ABC1</label><br><
input id="id1" type="checkbox" name="id1" /><label for="id1">ABC2</label><br><input id="id2" type="checkbox" name="id2" /><label for="id2">ABC3</label><br><
input id="id3" type="checkbox" name="id3" /><label for="id3">ABC4</label><br><input id="id4" type="checkbox" name="id4" /><label for="id4">ABC5</label><br> </div><
input id="Button2" type="button" value="button" language="javascript" onclick="removeSelected()" /></form> </body> </html>
An interesting sltn - Ur banking on the fact tht the first <input> wld b tied with the first <br>, innovative indeed, let me try it, I guess it wld work by the looks of it. Thanks again!!
![]() |
0 |
![]() |
Have you tried my post?
If you dont want to use <br> tag, then it could be a good solution for you.
Thanks.
HOQUE MD.NAZMUL
[document.getReaders]
![]() |
0 |
![]() |
NHOQUE:
Have you tried my post?
If you dont want to use <br> tag, then it could be a good solution for you.
Thanks.
Hi NHQUE,
Thnks for helping me out, well this page is in 1.1, so when it renders with the brs that I have added, it goes like this -
<span><input id="id0" type="checkbox" name="id0" /><label for="id0">ABC1</label></span><br>
<span><input id="id1" type="checkbox" name="id1" /><label for="id1">ABC2</label></span><br>
<span><input id="id2" type="checkbox" name="id2" /><label for="id2">ABC3</label></span><br>
<span><input id="id3" type="checkbox" name="id3" /><label for="id3">ABC4</label></span><br>
<span><input id="id4" type="checkbox" name="id4" /><label for="id4">ABC5</label></span><br>Are u telling me to link this with a css tht has the property for display:block set for the span, and then it wld render on a new line w/o the brs. I did not get a chnce to test this and Im afraid I cant until tomorrow, but then if this works with the css, I will defenitely sleep better tonight :)
![]() |
0 |
![]() |
Yes, if you see my post, I have used CSS for <span> tag.
Remove <br>, it is not required . As <span> tag will be handled by CSS, it is not required to <br> tag at all. Since the CSS used in the <span> tag makes its style as BLOCK.
Well, I tested it in IE as well as FF. There is no problem. Have a nice sleep tonight!
Thanks.
HOQUE MD.NAZMUL
[document.getReaders]
![]() |
0 |
![]() |
NHOQUE:
Yes, if you see my post, I have used CSS for <span> tag.
Remove <br>, it is not required . As <span> tag will be handled by CSS, it is not required to <br> tag at all. Since the CSS used in the <span> tag makes its style as BLOCK.
Well, I tested it in IE as well as FF. There is no problem. Have a nice sleep tonight!
Thanks.
Bravo IT WORKS :) THNX A TON..a simple sltn to this messy problem.
![]() |
0 |
![]() |