jQuery td onclick to set a checkbox, no bubbling

Question

I'd like to be able to click on the td element in a table and have it check or uncheck a checkbox in a sibling td on the same row.

Clicking the checkbox should still work normally.
Clicking the td element the checkbox resides in should also check the checkbox.
Clicking different td's should not require double clicks (reset click) due to a bad toggle implementation

Fiddle: http://jsfiddle.net/cJ2us/

Please note, yes this is very similar to a number of questions, please don't link any duplicates unless you actually understand the problem I have and how the answers given there do not fit my question. e.g.

Jquery event on wrapped input radio override 'checked' event Not checkboxes

jQuery onclick div checks a checkbox toggle doesn't allow clicking on seperate td's to carry out each check and uncheck

Find the Checkbox in Sibling <td> and check it using jQuery doesn't fit this example, code doesn't actually work how answerer thinks

In saying that, if you find a dupe that fits let me know! I just want a workable solution.

jsfiddle.net/U3636 is my solution

lsl
– lsl

2011-06-28 21:33:47 +00:00
Commented Jun 28, 2011 at 21:33 — lsl
– lsl, Commented Jun 28, 2011 at 21:33

BCS · Accepted Answer · 2011-06-29 00:49:29Z

17

This works, is it what you want?

$("td").click(function(e) {
    var chk = $(this).closest("tr").find("input:checkbox").get(0);
    if(e.target != chk)
    {
        chk.checked = !chk.checked;
    }
});

demo here

edited Jun 29, 2011 at 0:49

BCS

79.2k72 gold badges197 silver badges300 bronze badges

answered Jun 28, 2011 at 21:18

Mo Valipour

13.5k13 gold badges64 silver badges87 bronze badges

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

1 Comment

Mo Valipour Over a year ago

OK, it should work now, e.srcElement should be changed to e.target.

Naftali · Accepted Answer · 2011-06-28 21:20:39Z

1

Use labels.

<label for='cheboxID'>LABEL</label>

Here is a js solution: http://jsfiddle.net/maniator/eWh5F/

$("td").click(function(e) {
    var checkbox = $(':checkbox', $(this).parent()).get(0);
    var checked = checkbox.checked;
    if (checked == false) checkbox.checked = true;
    else checkbox.checked = false;
});

edited Jun 28, 2011 at 21:20

answered Jun 28, 2011 at 21:13

Naftali

147k41 gold badges247 silver badges304 bronze badges

3 Comments

lsl Over a year ago

Tried this, doesn't allow for filler space very well. Could maybe block them and make them fill the whole td but I'd rather a jquery solution sorry.

Naftali Over a year ago

@NotHelpful -- i posted a jQuery solution

lsl Over a year ago

FF issues with the checkbox - everyone seems to get stuck there :}

Rafay · Accepted Answer · 2011-06-28 21:47:26Z

0

$("td").click(function(e) {

    var $checkbox = $("input[type='checkbox']");
       $checkbox.attr('checked', !$checkbox.attr('checked'));



});

http://jsfiddle.net/cJ2us/12/

edited Jun 28, 2011 at 21:47

answered Jun 28, 2011 at 21:20

Rafay

31.1k5 gold badges71 silver badges106 bronze badges

1 Comment

Mo Valipour Over a year ago

clicking on checkbox does not check it!

Jhon Jesus · Accepted Answer · 2021-07-31 04:58:15Z

0

there is another way ,full javascript

 function aply(t){
   let chk = t.firstChild;
    chk.checked =!chk.checked;
 }
 function stopProp(e){
  e.stopPropagation();
 }

.table tr td{
height:50px;
width:100px;
background-color:gray;
}

<table class="table">
<tr>
<td  onclick="aply(this)"><input type="checkbox" onclick="stopProp(event);"  />1</td>
</tr>
<tr>
<td  onclick="aply(this)"><input type="checkbox" onclick="stopProp(event);"  />2</td>
</tr>
</table>

answered Jul 31, 2021 at 4:58

Jhon Jesus

3652 silver badges14 bronze badges

Collectives™ on Stack Overflow

jQuery td onclick to set a checkbox, no bubbling

4 Answers 4

1 Comment

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related