As I didn't find any question asked before, on how to toggle checkbox on click of a table row, so I would like to share my approach to this...
0
Add a comment
|
5 Answers
In order to select the checkbox of a row inside the table, we will first check whether the type attribute of the element we are targetting is not a checkbox if it's not a checkbox than we will check all the checkboxes nested inside that table row.
$(document).ready(function() {
$('.record_table tr').click(function(event) {
if (event.target.type !== 'checkbox') {
$(':checkbox', this).trigger('click');
}
});
});
If you want to highlight the table row on checkbox checked than we can use an if condition with is(":checked"), if yes than we find the closest tr element using .closest() and than we add class to it using addClass()
$("input[type='checkbox']").change(function (e) {
if ($(this).is(":checked")) { //If the checkbox is checked
$(this).closest('tr').addClass("highlight_row");
//Add class on checkbox checked
} else {
$(this).closest('tr').removeClass("highlight_row");
//Remove class on checkbox uncheck
}
});
3 Comments
Onimusha
Excellent solution but there is a slight issue (minor), checkbox is inside label tags (for css purposes), any jquery workaround you're aware of? Last resort is to just remove the label tags and switch them all to 'span class="label" or something and update css. Thanks whether you get around to this or not :)
Siddhartha esunuri
superb.. your solution saved lot of time
Vincent
If your checkboxes are labels for css styling, then instead of "if (event.target.type !== 'checkbox')" use "if(event.target.tagName != 'LABEL')".
This question was useful to me but I had an issue with the previous solution. If you click on a link in a table cell, it will trigger the checkbox toggle.
I googled this and I saw a proposition to add a event.stopPropagation() on the links of the table, like this:
$('.record_table tr a').click(function(event) {
event.stopPropagation();
});
This solution was a bad idea because I had some jquery bootstrap popover on a link of the table...
So here is a solutions that fits me better. By the way as I'm using bootstrap 2.3, the highlight of the line is made by adding the "info" class to the tr.
To use this code, you just need to add class="selectable" to the table tag.
$(".selectable tbody tr input[type=checkbox]").change(function(e){
if (e.target.checked)
$(this).closest("tr").addClass("info");
else
$(this).closest("tr").removeClass("info");
});
$(".selectable tbody tr").click(function(e){
if (e.target.type != 'checkbox' && e.target.tagName != 'A'){
var cb = $(this).find("input[type=checkbox]");
cb.trigger('click');
}
});
You will probably want to be more specific with the test condition, for exemple if you have other inputs in the row.
Comments
Triggering a click like many of the solutions provided above will cause the function to run twice. Update the prop value instead:
$('tr').click(function(event){
alert('function runs twice');
if(event.target.type !== 'checkbox'){
//$(':checkbox', this).trigger('click');
// Change property instead
$(':checkbox', this).prop('checked', true);
}
});
3 Comments
Gagantous
why does the function runs twice ?
CR Rollyson
@Gagantous – good question. When an event happens on an element, it first runs the handlers on it, then on it's parent, & so on. In this implementation, the function doesn't run twice when input checkbox is clicked directly (you'll notice my jsfiddle exp), but standard UI design accepts events (like click) on columns or rows for setting a property on an element (like values or styles). So the trigger click implementation in this manner causes the function to run twice – see Propagation. Good visual rep of what is happening: javascript.info/bubbling-and-capturing
Vincent
If your checkboxes are labels for css styling, then instead of "if (event.target.type !== 'checkbox')" use "if(event.target.tagName != 'LABEL')".
Even though the accepted @Mr. Alien answer works great, it doesn't work in case you decide to add a new <tr> row dynamically with jQuery at some point.
I recommend to use a event delegation approach, which is just a slight modification of accepted answer.
Instead of:
...
$('.record_table tr').click(function(event) {
...
use
...
$('.record_table').on('click', 'tr', function(event) {
...
And the same for the highlighting, use:
...
$(".record_table").on('change', "input[type='checkbox']", function (e) {
...
More info here: Click event doesn't fire for table rows added dynamically
Comments
You may simply trigger this click event...:)
$(document).ready(function()
{
$("table tr th :checkbox").click(function(event)
{
$('tbody :checkbox').trigger('click');
});
});
OR
$(document).ready(function()
{
$("table tr th :checkbox").on('click',function(event)
{
$('tbody :checkbox').trigger('click');
});
});
