<tr> and onclick and a checkbox...

Sonnich Jensen · Aug 23, 2007

Hi all!

I have a table, with some items and a checkbox in the last column, for
seleting.
I have an onclick event for the row on the <tr tag, so the entire row
is clickable, that is easier when going throug a list.
The problem I have is that the checkbox, when being clicked will
toggle and then again on the rows event.
It will be toggled twice causing it not to work... well both works...

I have tried to stop the rows event by an onclick on the checkbox, but
that did not work well...

Can anyone help me on this?`

BR
Sonnich

--- table row with event
<tr id='div_$i' onMouseUp=\"check_item('sel_$i');\" >
---- coloumn with checkbox
<td align=\"center\"><input name=\"sel_$i\" type=\"checkbox\" value=
\"$part1[$i]\"

and some JS to handle the row...

function check_item(sel_item)
{
var i;
v = document.forms["myform"];
i=0;
while( (i < v.elements.length) && (v.elements.name !=
sel_item) )
i++;
if(i < v.elements.length)
v.elements.checked= !v.elements.checked;
}

Bart Van der Donck · Aug 23, 2007

Sonnich said:
I have a table, with some items and a checkbox in the last column, for
seleting.
I have an onclick event for the row on the <tr tag, so the entire row
is clickable, that is easier when going throug a list.
The problem I have is that the checkbox, when being clicked will
toggle and then again on the rows event.
It will be toggled twice causing it not to work... well both works...

I have tried to stop the rows event by an onclick on the checkbox, but
that did not work well...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My cool web page</title>
<script type="text/javascript">
function alter()
{
if (document.forms[0].box.checked) {
document.forms[0].box.checked = false
}
else {
document.forms[0].box.checked = true
}
}
</script>
</head>
<body>
<form action="script.php">
<table border="1">
<tr onClick="alter()"
onMouseOver="this.style.backgroundColor='yellow'"
onMouseOut="this.style.backgroundColor='white'"
style="background-color:white"<td>xx</td>
<td><input type="checkbox" name="box" onClick="alter()"></td>
</tr>
<tr>
<td>xx</td>
<td>xx</td>
</tr>
</table>
</form>
</body>
</html>

Hope this helps,

Bart Van der Donck · Aug 23, 2007

Sonnich said:
I have a table, with some items and a checkbox in the last column, for
seleting.
I have an onclick event for the row on the <tr tag, so the entire row
is clickable, that is easier when going throug a list.
The problem I have is that the checkbox, when being clicked will
toggle and then again on the rows event.
It will be toggled twice causing it not to work... well both works...

I have tried to stop the rows event by an onclick on the checkbox, but
that did not work well...

Here is another way:

<table border="1">
<tr>
<td><label for="box1">xx</label></td>
<td><input type="checkbox" name="box1" id="box1"></td>
</tr>
<tr>
<td><label for="box2">xx</label></td>
<td><input type="checkbox" name="box2" id="box2"></td>
</tr>
</table>

Evertjan. · Aug 23, 2007

Bart Van der Donck wrote on 23 aug 2007 in comp.lang.javascript:

function alter()
{
if (document.forms[0].box.checked) {
document.forms[0].box.checked = false
}
else {
document.forms[0].box.checked = true
}
}

Dag Bart,

function alter(){
document.forms[0].box.checked = !document.forms[0].box.checked;
};

Bart Van der Donck · Aug 23, 2007

Evertjan. said:
Bart Van der Donck wrote on 23 aug 2007 in comp.lang.javascript:

function alter()
{
if (document.forms[0].box.checked) {
document.forms[0].box.checked = false
}
else {
document.forms[0].box.checked = true
}
}

Click to expand...

Dag Bart,

function alter(){
document.forms[0].box.checked = !document.forms[0].box.checked;

Daar moet ge een Hollander voor zijn om zoiets te kunnen bedenken

Sonnich Jensen · Aug 24, 2007

[code snipped]

Hope this helps,

It did. That was what I was looking for.

Dank U veel
Sonnich

Disable TR onclick event	14	Jun 14, 2006
Filter table rows based on multiple checkboxes value	2	Jan 13, 2023
JS, DOM and tr... IE problems!	5	Nov 18, 2006
Survey details won't go through using php, ajax, Mysql	0	Oct 26, 2023
[IE] Toggle checkbox state - onclick vs. onchange	0	Apr 4, 2008
How to change star rating color on mouseenter, on mouseout, and on onclick	0	Sep 28, 2018
How can I hide a div using an event listener on multiple checkboxes?	6	Dec 23, 2022
toggle node with checkbox	0	Oct 12, 2008

<tr> and onclick and a checkbox...

Sonnich Jensen

Bart Van der Donck

Bart Van der Donck

Evertjan.

Bart Van der Donck

Sonnich Jensen

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads