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
Solved

Add "onClick" attribute to a CheckBoxList ListItem

Posted on 2004-08-16
12
7,963 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
  • 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
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
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 500 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

856 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