JQuery toggle checkbox input with table cell click

Question

I want to make it so that if you click anywhere inside a table cell, the checkbox in the cell is toggled. It should also work normally if the checkbox is clicked directly.

Here I used a red bordered blank "label" as the clickable area. Ideally I'd like to avoid labels.

http://jsfiddle.net/WPZf2/

<tr>
    <td><label><input type="checkbox"/></label></td>
    <td><input type="checkbox"/></td>
    <td><input type="checkbox"/></td>
</tr>

Here the table cell click is being detected.

http://jsfiddle.net/WPZf2/1/

    $('td').click(function(){
        alert('click!');

If false is returned and the checkbox is clicked, the checkbox initially checked and then when you dismiss the alert popup the checkbox clears again. (at least in Chrome, Firefox and IE11)

http://jsfiddle.net/WPZf2/2/

    $('td').click(function(){
        alert('click!');
        return false;

I tried this with return false and no return. If you click on the cell it works but it doesn't work if you click the checkbox.

http://jsfiddle.net/WPZf2/3/

var $elem = $(this).find('input');
$elem.prop('checked', !$elem.prop('checked'));

If I do $elem.click() with no return statement it has the same problem.

http://jsfiddle.net/WPZf2/4/

$elem.click();

If I have "return false" it doesn't work at all:

http://jsfiddle.net/WPZf2/5/

So basically I want to be able to click anywhere in a cell including directly on the checkbox to toggle the checkboxes.

Raju Padhara · Accepted Answer · 2014-06-03 11:01:01Z

10

Here is another alternative way.

$(function(){
   $('td').click(function (event) {
     if (!$(event.target).is('input')) {
        var obj =$(this).find('input');      
        obj.prop('checked', !obj.is(':checked'));      
       }
   });
});

FIDDLE

answered Jun 3, 2014 at 11:01

Raju Padhara

7051 gold badge7 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Luke Wenke Over a year ago

It's good that it is just in one function rather than two though.

Luke Wenke · Accepted Answer · 2014-06-04 01:42:14Z

4

http://jsfiddle.net/WPZf2/18/

$('td').click(function(){
    $(this).find(':checkbox').click();
});

$(":checkbox").click(function(e) {
     e.stopPropagation();        
});

edited Jun 4, 2014 at 1:42

answered Jun 3, 2014 at 10:55

Luke Wenke

1,1462 gold badges24 silver badges45 bronze badges

Comments

Subbu · Accepted Answer · 2014-06-03 10:52:28Z

1

Try this

$(function(){
    $('td').click(function(){
        //alert('click!');
        var $elem = $(this).find('input');
        $elem.prop('checked', !$elem.prop('checked'));
        //$elem.click();
//        return false;
    });
    $('input[type="checkbox"]').click(function(){
        $(this).prop('checked',!$(this).prop('checked'));
    })
});

answered Jun 3, 2014 at 10:52

Subbu

3,2995 gold badges26 silver badges36 bronze badges

Comments

Jai · Accepted Answer · 2014-06-03 11:06:53Z

1

Try this:

$('td, input').click(function (event) { // add input in the selector
    event.stopPropagation(); // stop the event bubble up
    var tgl = !$(event.target).is('input') && 
              !$('input:checkbox:checked', this).length ? true : false;
     // above we checked if target is not input and checked input is 
     // not there initially
    $('input:checkbox', this).prop('checked', tgl);
});  //---------------------------------------^^^---passing the boolean value

Demo

answered Jun 3, 2014 at 11:06

Jai

74.8k12 gold badges77 silver badges104 bronze badges

3 Comments

Luke Wenke Over a year ago

A line can be shortened to this: var tgl = !$(event.target).is('input') && !$(':checked', this).length;

Jai Over a year ago

@LukeWenke this is just for readablity and removing the scroll in this answer post. although demo has the single line.

Luke Wenke Over a year ago

I changed "input:checkbox:checked' to ':checked' and also removed '? true : false'.

Community · Accepted Answer · 2017-05-23 10:29:14Z

0

Found an answer!

jQuery click on td to toggle checkbox

http://jsfiddle.net/WPZf2/6/

$('td').click(function (event) {
  if (!$(event.target).is('input')) {

      $('input:checkbox', this).prop('checked', function (i, value) {
         return !value;
      });
   }

edited May 23, 2017 at 10:29

CommunityBot

11 silver badge

answered Jun 3, 2014 at 10:45

Luke Wenke

1,1462 gold badges24 silver badges45 bronze badges

Collectives™ on Stack Overflow

JQuery toggle checkbox input with table cell click

5 Answers 5

1 Comment

Comments

Comments

Demo

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related