javascript - jquery点击事件处理

Question

当我单击 TD 时，应选择内部的输入元素，反之亦然，

我使用 jquery 编写了下面的代码，它工作正常，但是当我点击复选框时，它不像复选框的工作方式那样工作，任何想法如何处理这个

 <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>

Answer 1

那是因为事件冒泡了，你可以使用stopPropagation方法。

$(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/

Answer 2

$(".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); 
        }
    }
});