Question

我有以下HTML代码：

<table class="table table-striped">
    <thead>
        <tr>
            <th></th>
            <th>Color</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="checkbox checkbox-primary">
                    <input type="checkbox" name="elements_ids">
                    <label></label>
                </div>
            </td>
            <td>Blue</td>
        </tr>
        ...
    </tbody>
</table>

如果使用jQuery我可以点击<tr>，但是只有当<tr>有一个要检查的复选框时才能选中该复选框。我不希望这段代码影响我页面上的所有表格。

我试过了：

$(".table tbody tr").has(':checkbox').change(function(e){
    alert('ee');
});

此外，如果选中复选框，我该如何还原？

你能帮忙吗？

Answer 1

在点击事件中找到tr中的复选框，然后使用prop()方法设置复选框状态，如下所示。

＆＃13;

$(".table tbody tr").click(function(e) {
    if($(e.target).is(':checkbox')) return; //ignore when click on the checkbox
  
    var $cb = $(this).find(':checkbox');
    $cb.prop('checked', !$cb.is(':checked'));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped">
    <thead>
        <tr>
            <th></th>
            <th>Color</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="checkbox checkbox-primary">
                    <input type="checkbox" name="elements_ids">
                    <label></label>
                </div>
            </td>
            <td>Blue</td>
        </tr>
    </tbody>
</table>

＆＃13;

Answer 2

有一个jsfiddle

以及您需要的javascript：

$("tr").on("click", function(e){
    $("input[type='checkbox']", this).each( function() {
        $(this).attr('checked', !$(this).attr('checked'));
    });
});

这样它将反转所点击行上的所有复选框。

单击jQuery中的选择复选框

2 个答案: