Solved

Add "onClick" attribute to a CheckBoxList ListItem

Posted on 2004-08-16
12
7,865 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
Comment Utility
CheckBox1.Attributes.Add("onclick", "javascript:MyFunction();")
0
 
LVL 35

Expert Comment

by:YZlat
Comment Utility
add this line to your code-behind Page_Load
0
 
LVL 33

Author Comment

by:raterus
Comment Utility
I'm using a CheckBoxList, not a CheckBox Control.
0
 
LVL 35

Expert Comment

by:YZlat
Comment Utility
then

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

Expert Comment

by:shovavnik
Comment Utility

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
Comment Utility
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 8

Accepted Solution

by:
shovavnik earned 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
I knew it would be more problems than a solution, now they want me to add a tooltip to each checkbox.. :-)
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

763 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now