2

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

2 に答える 2

3

イベントがバブルアップするため、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/

于 2013-03-14T04:40:18.923 に答える
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); 
        }
    }
});
于 2013-03-14T04:40:36.790 に答える