jquery click event handling

Question

When i click TD the input element inside should be selected and vise-versa,

I wrote the below code using jquery which is working fine but when i click on the checkbox it is not working the way a checkbox works, any ideas how to hadle this

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function (){
    $(".mainTable td").click(function (){
        var obj = $(this).children('input[type=checkbox]');
        var bool = obj.prop("checked");
        if(obj.length > 0){
           obj.attr("checked",!bool); 
        }
    });
});
</script>

<table cellpadding=10 border=1 class='mainTable'>
<tr>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
<table>

WHy are you using prop in one case and attr in another?

Leeish
– Leeish

2013-03-14 04:38:19 +00:00
Commented Mar 14, 2013 at 4:38 — Leeish
– Leeish, Commented Mar 14, 2013 at 4:38
and does obj.attr("checked",!bool); this do.?

Dipesh Parmar
– Dipesh Parmar

2013-03-14 04:42:23 +00:00
Commented Mar 14, 2013 at 4:42 — Dipesh Parmar
– Dipesh Parmar, Commented Mar 14, 2013 at 4:42

Ram · Accepted Answer · 2013-03-14 04:40:18Z

3

That's because events bubble up, you can use stopPropagation method.

$(document).ready(function (){
    $(".mainTable td").click(function (){
        $('input[type=checkbox]', this).prop('checked', function(i, checked){
           return !checked; 
        })
    }).find('input[type=checkbox]').click(function(e){
        e.stopPropagation();
    })
});

http://jsfiddle.net/vs4ma/

answered Mar 14, 2013 at 4:40

Ram

145k16 gold badges174 silver badges201 bronze badges

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

Comments

pdoherty926 · Accepted Answer · 2013-03-14 04:40:36Z

1

$(".mainTable td").click(function (event){
    if (event.target.nodeName === 'INPUT') {
        return;
    } else {
        var obj = $(this).children('input[type=checkbox]');
        var bool = obj.prop("checked");
        if(obj.length > 0){
           obj.attr("checked",!bool); 
        }
    }
});

answered Mar 14, 2013 at 4:40

pdoherty926

10.5k5 gold badges47 silver badges75 bronze badges

Collectives™ on Stack Overflow

jquery click event handling

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest