Click Table Row, Enable/Disable Checkbox

[kiltman]

Hello,

I'm having a few problems .

What I want to do is when the user clicks on a table row, it then enables/disables a checkbox held within that row.

HTML Code:

<form action="?action=delete" method="post">

	<table>
	<th>ID</th><th>Forename</th><th>Surname</th><th>Institution</th><th>Membership Type</th><th>Delete</th>

		<tr>
			<td>1</td>
			<td>Forenames1</td>

			<td>AAUserSurname1</td>
			<td>University of Strathclyde</td>
			<td>Conference</td>
			<td><input type="checkbox" id="member_ids" name="member_ids[]" value="1" /></td>														
		</tr>

		<tr>
			<td>2</td>
			<td>Forenames2</td>

			<td>ACUserSurname2</td>
			<td>University of Edinburgh</td>
			<td>Corporate</td>
			<td><input type="checkbox" id="member_ids" name="member_ids[]" value="2" /></td>														
		</tr>

		<tr>
			<td>3</td>
			<td>Forenames3</td>

			<td>AZUserSurname3</td>
			<td>University of Stirling</td>
			<td>Life</td>
			<td><input type="checkbox" id="member_ids" name="member_ids[]" value="3" /></td>														
		</tr>

	</table>

	<button type="submit" class="confirm" name="submit">Delete Selected Members</button>

</form>		

Javascript:

function tableRowClickSetUp() {
	var theTrList = document.getElementsByTagName('tr');
	
	for (var i = 1; i < theTrList.length; i++) {
		var theTr = theTrList.item (i);
					
		theTr.onclick = function () {				
			var theInputList = this.getElementsByTagName('input');		
			var theInput = theInputList.lastChild;
						
			if (theInput.checked = true) {
				theInput.checked = false;
			} else {
				theInput.checked = true;
			}				
		}

	}
}

Does anyone know how to do this?

Thanks in advance

[jimfraser]

I think this line is bad:
var theInput = theInputList.lastChild;

Try:
var theInput = theInputList[theInputList.length-1];

[kiltman]

Thanks Jim,

I got it going now with the following code:

function tableRowClick() {
	var theTrList = document.getElementsByTagName('tr');
	
	for (var i = 1; i < theTrList.length; i++) {
		var theTr = theTrList.item (i);
		
		theTr.onclick = function () {				
			var theInputList = this.getElementsByTagName('input');		
			var theInput = theInputList[theInputList.length-1];
					
			if (theInput.checked == true) {
					theInput.checked = false;
			} else {
				theInput.checked = true;
			}		

		}
	}
}

However I have came across a problem, I now can't enable/disable the checkbox directly, any ideas how to fix this? I have uploaded a example at http://www.paulmowat.co.uk/test/tablerow/tablerow.html

[Kravvitz]

It's probably because of the event bubbling (go here). You'll need to add an onclick handler for each checkbox that prevents bubbling.

There's a way to simplify your code

			theInput.checked = !theInput.checked;

is the same as

			if (theInput.checked == true) {
					theInput.checked = false;
			} else {
				theInput.checked = true;
			}

P.S. Why are you using tabs for indention?

[Brett Merkey]

Easier:

http://web.tampabay.rr.com/bmerkey/e...able-rows.html

[kiltman]

ah perfect thanks brett, got mine working perfect now, i never thought about putting a check in for the 'input' field to return.