Checkbox inside a div

Forum Moderators: open

Message Too Old, No Replies

Checkbox inside a div

How to make clicking on div swap the checkbox

Nutter

3:24 am on Feb 18, 2005 (gmt 0)

I have series of div's that all contain a single checkbox each. What I'm trying to do is to allow the user to click on the div it swaps the value of the checkbox. I've got this working, with one flaw. If the user clicks on the checkbox, it doesn't swap. I understand why, it has to do with fact that clicking on the checkbox also fires the onClick of the div. Is there a good way to handle this so it works?

I'm thinking the easiest would be if I can get the name of the control clicked - something like if checkbox was clicked don't worry about the swap b/c the checkbox takes care of itself, but if the div was clicked then swap it. But, since the div onClick fires either way, that's causing a problem.

Thanks,
- Ryan

Rambo Tribble

5:48 am on Feb 18, 2005 (gmt 0)

You may wish to investigate the use of cancelBubble to control event propagation.

Nutter

1:13 pm on Feb 18, 2005 (gmt 0)

Everything I've found on cancelBubble mentions it in relation to IE. Does it work in FF, or other non-IE browsers?

orion_rus

1:23 pm on Feb 18, 2005 (gmt 0)

Yes Nutter he's right)
And you right too) i was very upset then meets it. And i try cancelBubbling option but it doesn't help me with crossbrowsing.
I found a solution here [quirksmode.org]
If you are still didn't know how i can example a code here

Rambo Tribble

1:53 pm on Feb 18, 2005 (gmt 0)

While cancelBubble started in IE, at least Mozilla and Opera seem to support it in recent releases. I don't know about Konqueror/Safari; you'd have to try it.

The W3C-sanctioned method is stopPropagation(). Naturally, you could branch your code to accommodate browsers that can't handle cancelBubble, but support stopPropagation().

Nutter

10:10 pm on Feb 19, 2005 (gmt 0)

So, somewhat stupid question. Do I need one function for the div onClick and another for the checkbox onClick?

Either thing I click on (checkbox or it's parent div) fires the onClick for the div. In the function that's called by onClick, is there a way to tell whether the checkbox or the div was clicked?

kaled

10:55 pm on Feb 19, 2005 (gmt 0)

Assuming that the divs contain nothing but the checkboxes, why use divs at all?

Wrap each checkbox in a <label>. No javascript required. End of problem. If you need to trigger another event, onchange will probably work.

Kaled.

Rambo Tribble

1:40 am on Feb 20, 2005 (gmt 0)

See if this sheds any light on the situation:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<form action="">
<div style="height:200px;width:300px;background:#dee;" onclick="alert(this.tagName);">
 <input type="checkbox" onclick="event.cancelBubble=true;" /><br /><br />
 <input type="checkbox" onclick="event.cancelBubble=false;" />
</div>
</form>
</body>
</html>

Nutter

2:26 am on Feb 20, 2005 (gmt 0)

It's wrapped in a div so I can change the row color. I haven't ever used <label>, but I thought about <span>ing the text. That's my next try if the last suggestion is too confusing for me ;-)

Nutter

3:06 am on Feb 20, 2005 (gmt 0)

Thanks all. I got it working with a mix of event.getTarget, getElementById, parentNode, and getElementsByTagName.

One additional question though: I'm passing to one of the functions as function_name(event) under the onClick. Is there a way to get the event if I pass it as function_name(this) instead? Just seems cleaner, although it's working great as-is.

- Ryan

Rambo Tribble

6:11 am on Feb 20, 2005 (gmt 0)

I believe this can only refer to the object on which the event is called, not the event itself.

orion_rus

8:53 am on Feb 20, 2005 (gmt 0)

I think what it's a good way.
It's not necessary to send event to a function> U can detect this event in function very easy what's why it's a good technique to send this to a function
Good luck to you

Nutter

1:06 pm on Feb 20, 2005 (gmt 0)

Right - the function that needs the event uses currentTarget because it needs to use both the event and the control calling it, and the div that the control is in (parentNode) to change style classes. It just seems like I'm doing it backwards. But, it works, so unless I hear a good argument, I'm going to leave it as-is.

Thanks to everyone who helped
- Ryan

kaled

4:01 pm on Feb 20, 2005 (gmt 0)

I haven't ever used <label>, but I thought about <span>ing the text.

You really should try it. Without knowing exactly what you want to do, I can't be certain, but I think you would be able to ditch all that javascript. You might need to use a little css too.

I haven't use display:block with a label but it should be ok. This will make the <label> behave like a div, however, if you place block elements in it, it will fail to validate.

Kaled.