Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Add "onClick" attribute to a CheckBoxList ListItem

Posted on 2004-08-16
12
Medium Priority
?
8,170 Views
Last Modified: 2013-11-19
I need to add some custom javascript to ONE checkbox of a checkboxlist (the checkboxlist has about 10 checkboxes).  This javascript should be rendered as an "onClick" attribute in the <input type="checkbox" ...> tag.  Is there anyway to do this?  I tried adding an "onClick" attribute to the listitem, but it was never rendered.  Does anyone know another way that this can be done?

Thanks for any help,
--Michael
0
Comment
Question by:raterus
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 3
12 Comments
 
LVL 35

Expert Comment

by:YZlat
ID: 11812438
CheckBox1.Attributes.Add("onclick", "javascript:MyFunction();")
0
 
LVL 35

Expert Comment

by:YZlat
ID: 11812447
add this line to your code-behind Page_Load
0
 
LVL 33

Author Comment

by:raterus
ID: 11812524
I'm using a CheckBoxList, not a CheckBox Control.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 35

Expert Comment

by:YZlat
ID: 11812563
then

CheckBoxList.Attributes.Add("onclick", "javascript:MyFunction();")
0
 
LVL 8

Expert Comment

by:shovavnik
ID: 11812773

Add this either immediately after binding your checkboxlist (if you're using databinding) or in Page_Load() (if you specify the listitems in your aspx file itself):

MyCheckBoxList.Items[4].Attributes.Add( "onclick", "javascript:doSomething();window.cancelEvent=true;" );
0
 
LVL 33

Author Comment

by:raterus
ID: 11813244
I wish it were that easy, but as I mentioned in my original post, I've already tried that and it doesn't work for a CheckBoxList.
0
 
LVL 8

Accepted Solution

by:
shovavnik earned 2000 total points
ID: 11814260
Well, here's another try.  This might work, but only IE supports this syntax.  If it works, a similar solution can be made to support other browsers.

Two possible ways of going at it:

1. Give your single unique checkbox an id.
<asp:ListItem id="SpecialCheckbox"...>

Then in the <head> section of your aspx page, add the following client-side script block:
<script for="SpecialCheckbox" event="onclick">
window.cancelEvent = true; // avoid the postback
var chk = event.srcElement;
alert( chk.checked ); // just to see that it works
</script>

2. This is a better solution for generated list items (i.e., made at run-time in your code-behind or other scriptblock):
Give all your listitems the same id, and also give them an attribute that identifies them in addition.
So the result html could look like:
<input type="checkbox" name="MyCheckboxList" specialId="1">
<input type="checkbox" name="MyCheckboxList" specialId="2">
<input type="checkbox" name="MyCheckboxList" specialId="3">

And then in the same client-side script block:
<script for="SpecialCheckbox" event="onclick">
var chk = event.srcElement;
alert( chk.checked ); // just to see that it works
if( chk.specialId == '3' ) {
  event.cancelEvent = true; // avoid the postback
  // do stuff
}
</script>


If these don't work, you can try some variation.  Maybe this will give you a better direction.

Btw, have you considered that a better solution may be to avoid using a CheckBoxList?  You can use a DataRepeater to render all your checkboxes in a similar way, and this gives you more flexibility for particular treatment of special checkboxes.

0
 
LVL 33

Author Comment

by:raterus
ID: 11815018
The first idea works, unfortunately this is one of the rare situations where I have to support browsers other than IE...go figure.  I tried this code in Mozilla/Netscape, didn't work.

I can see how a repeater could be beneficial in this situation, infact, I don't see myself using a checkboxlist/radiobuttonlist again for the same reason I'm addressing now.  Seems ridiculous that you can't add simple javascript to the listitems, yet in most every other webcontrol, you can do this easily.  Unfortunately I'm working with a finished application here, it worked great until the powers that be wanted something to trigger when they clicked certain checkboxes.  This checkboxlist is crucial to many areas of the page, and it would take quite a lot of rewrite to get the functionality another way.  Perhaps I could extend the CheckBoxList and write my own render event, gee that'll be fun :-)

Thanks for your help so far,
--Michael
0
 
LVL 8

Expert Comment

by:shovavnik
ID: 11815806
Well, if the first one worked, you can make it a bit more cross-browser compatible (you can never catch everything) like this:

<html>
<head>
<script>
function getDocumentAll() {
  // implement browser check to get the equivalent to document.all in every browser ever imagined :)
}
function assignHandlers() {
  var doc = getDocumentAll();
  doc[ 'MySpecialCheckBox' ].onClick = checkBoxClickHandler;
}
function checkBoxClickHandler() {
  window.cancelEvent = true; // avoid the postback
  var chk = event.srcElement; // I can't remember if this is corss-browser, but a quick internet search will turn up equivalents if it isn't.
  alert( chk.checked ); // just to see that it works
}
</script>
</head>
<body onload="assignHandlers()">
</body>
</html>

Let me know if this works out for you.  It's a bit late here (close to 2am), so I may have "missed a spot".  I hope this gives you a lead.
0
 
LVL 33

Author Comment

by:raterus
ID: 11820271
I gave in and changed my code to use a bunch of HtmlInputCheckbox controls.  It might be a little more coding, but for the amount of changes I'm likely to be implementing down the road, this step was only inevitable.  I don't see myself using the CheckBoxList or the RadioButtonList control until something changes, maybe asp.net 2.0 will allow you to add custom javascript easily.

You do have the correct answer, and from the amount of searching I did on this topic yesterday, it is probably one of the few places that actually spell out a working solution.  Thanks for all your help!

--Michael
0
 
LVL 8

Expert Comment

by:shovavnik
ID: 11820388
Glad it worked out for you.  I came about this solution because of a very similar problem.  Sometimes you can't avoid recoding.
0
 
LVL 33

Author Comment

by:raterus
ID: 11820415
I knew it would be more problems than a solution, now they want me to add a tooltip to each checkbox.. :-)
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

636 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question