Question

我有一个HTML表格。在td标记中有一个复选框。如果我点击该复选框，则会照常检查或取消选中。但我想要的是，如果我点击特定td的任意位置，则复选框也会被选中或取消选中。因为如果那里有很多行和复选框，那么你可能会发现很难将鼠标指针放在复选框上并按下一下（复选框很小，所以发现它很困难是正常的）。所以我希望它对我的客户来说很容易，如果他按下复选框外但在父td标签内的点击，那么它也会起作用。

我的JQuery代码工作得非常好。现在，如果我在复选框外单击，则会触发其单击事件。但问题是现在如果我完全点击复选框然后它无法正常工作。我在下面给出我的代码。这也是jsfiddle link of my code。

<div class='modal-inner-content'>
  <table style="border: 1px solid black;">
    <tr>
        <td class='check'><input type='checkbox'/></td>
    </tr>
  </table>
</div>

我的JQuery代码：

$('.modal-inner-content').on('click', 'td', function(){
  var checked = $(this).find(':checkbox').is(':checked');
    $(this).find(':checkbox').prop('checked', !checked);
});

更新
现在jsfiddle代码将工作，我忘了包括库。现在看到那里，如果你点击复选框外面然后它的工作，但如果你完全点击复选框，那么它不起作用。有什么帮助吗？

Answer 1

试试这个：

$('.modal-inner-content td').click(function (event) {
        if (!$(event.target).is('input')) {
           $('input:checkbox', this).prop('checked', function (i, value) {
            return !value;
           });
        }
    });

Answer 2

您可以通过选中已点击的元素复选框来执行此操作，或者不执行以下操作。

$('.modal-inner-content').on('click', 'td', function (e) {
    if (!$(e.target).is(':checkbox')) {
        var checked = $(this).find(':checkbox').is(':checked');
        $(this).find(':checkbox').prop('checked', !checked);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='modal-inner-content'>
    <table style="border: 1px solid black;">
        <tr>
            <td class='check'>
                <input type='checkbox' />
            </td>
        </tr>
    </table>
</div>

Answer 3

在你的jsfiddle中只需添加Jquery资源

https://code.jquery.com/jquery-2.2.4.js

Answer 4

$('.modal-inner-content').on('click', 'check', function() {
  var checked = $(this).find(':checkbox').is(':checked');
    $(this).find(':checkbox').prop('checked', !checked);
});

点击td上的活动无效

4 个答案: