SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
-
Nov 4, 2006, 05:48 #1
- Join Date
- Mar 2004
- Location
- scotland
- Posts
- 235
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Click Table Row, Enable/Disable Checkbox
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:
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>
Code: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; } } } }
Thanks in advance
-
Nov 4, 2006, 07:10 #2
- Join Date
- Nov 2004
- Location
- Nelson BC
- Posts
- 2,310
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I think this line is bad:
var theInput = theInputList.lastChild;
Try:
var theInput = theInputList[theInputList.length-1];
-
Nov 4, 2006, 09:16 #3
- Join Date
- Mar 2004
- Location
- scotland
- Posts
- 235
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks Jim,
I got it going now with the following code:
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; } } } }
-
Nov 4, 2006, 15:28 #4
- Join Date
- Mar 2005
- Location
- USA
- Posts
- 5,482
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
Code:theInput.checked = !theInput.checked;
Code:if (theInput.checked == true) { theInput.checked = false; } else { theInput.checked = true; }
We miss you, Dan Schulz.
Learn CSS. | X/HTML Validator | CSS validator
Dynamic Site Solutions
Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.
-
Nov 5, 2006, 11:23 #5
- Join Date
- Apr 2006
- Posts
- 20
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Nov 5, 2006, 17:10 #6
- Join Date
- Mar 2004
- Location
- scotland
- Posts
- 235
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
ah perfect thanks brett, got mine working perfect now, i never thought about putting a check in for the 'input' field to return.
Bookmarks