Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Clickable Row & Checkbox conflict

Tags:

I made my table row clickable with this function

    $("#grid tbody tr").click(function () {     var $checkbox = $(this).find(':checkbox');     $checkbox.attr('checked', !$checkbox.attr('checked')); }); 

and it works fine, however when I try to click the checkbox self, it doesnt work. What should I do to make both of them work?

like image 289
wallace740 Avatar asked Apr 18 '11 10:04

wallace740


People also ask

How do I make a row clickable?

Using <a> tag inside <td> One more way to make the whole row clickable is to add an <a> inside every <td> element. Along with it add hover to the row which we want to make clickable and use display: block property to anchor to make the whole row clickable.

How do you link a row in HTML?

rowlink and attribute data-link="row" to a <table> or <tbody> element. For other options append the name to data-, as in data-target="a. mainlink" A cell can be excluded by adding the . rowlink-skip class to the <td> .

How do you make a row clickable in JavaScript?

If you add "display: block" CSS style tag to the anchor objects in the cells that you want to be clickable it will make the entire cell (minus any padding) act like a button. The cursor is displayed correctly and it previews the link destination in the status bar.


1 Answers

Using a single event handler:

$("#grid tbody tr").click(function(e) {     if (e.target.type == "checkbox") {          // stop the bubbling to prevent firing the row's click event         e.stopPropagation();     } else {         var $checkbox = $(this).find(':checkbox');         $checkbox.attr('checked', !$checkbox.attr('checked'));     } }); 

http://jsfiddle.net/karim79/UX2Fv/

like image 59
karim79 Avatar answered Dec 24 '22 22:12

karim79