javascript - 如何取消表格中的选中

标签 javascript jquery

目标:
当您选中 id="bbbbbb"的复选框时,应选择所有内容;当您取消选择具有类“asdf”的特定复选框时,应取消选择 id="bbbbbb"的复选框。

问题:
我不知道该怎么做。

信息:
下面的代码今天在生产阶段使用。

JSFiddle DEMO

谢谢!

$("#candy input[type=checkbox]").on("change", function () {
    if (this.checked) {
        $(this).parents('tr').addClass('selected');
        $('#dd').removeClass('selected');
    } else {
        $(this).parents('tr').removeClass('selected');
        $('#dd').removeClass('selected');
    }
});


$('#bbbbbb').click(function () {
    var checked = $("#bbbbbb").is(':checked');
    $(".asdf").each(function () {
        $(this).prop('checked', checked);
        if (checked) {
            $(this).parents('tr').addClass('selected');
            $('#dd').removeClass('selected');
        } else {
            $(this).parents('tr').removeClass('selected');
            $('#dd').removeClass('selected');
        }
    });
});
tr.selected {
    background-color: #FEF0BF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="candy">
    <tr id="dd">
        <th>
            <input type="checkbox" id="bbbbbb" />
        </th>
        <th width="20">a</th>
        <th width="20">b</th>
        <th width="20">c</th>
        <th width="20">d</th>
        <th width="20">e</th>
        <th width="20 ">f</th>
        <th width="20 ">g</th>
        <th width="20 ">h</th>
    </tr>
    <tr>
        <td><input type="checkbox" class="asdf"  /></td>
        <td>v</td>
        <td>v</td>
        <td>v</td>
        <td>v</td>
        <td>v</td>
        <td>v</td>
        <td>v</td>
        <td>v</td>
        <td>v</td>                                 
    </tr>
    <tr>
        <td><input type="checkbox" class="asdf"  /></td>
        <td>e</td>
        <td>e</td>
        <td>e</td>
        <td>e</td>
        <td>e</td>
        <td>e</td>
        <td>e</td>
        <td>e</td>
        <td>e</td>                                  
    </tr>
    <tr>
        <td><input type="checkbox" class="asdf"  /></td>
        <td>q</td>
        <td>q</td>
        <td>q</td>
        <td>q</td>
        <td>q</td>
        <td>q</td>
        <td>q</td>
        <td>q</td>
        <td>q</td>                                  
    </tr>
</table>

最佳答案

当触发change事件时,需要将元素id="bbbbbb"的checked属性设置为false。

这是更新的 fiddle :http://jsfiddle.net/qabnx4ph/27/

您只需添加

$('#bbbbbb').prop('checked', false);

更改事件中的其他条件。

关于javascript - 如何取消表格中的选中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32724094/

相关文章:

jquery - 使用 Jquery Mobile 的网站不同页面上的相同 ID 发生冲突

javascript - 有没有一种方法可以通过向 url 地址添加不同的名称来显示 Bootstrap 轮播的不同幻灯片?

javascript - 动态更改android webView中的HTML元素

jquery - MVC 表单中的自定义样式 CSS

javascript - 使用 useState 添加一个 child 到树

javascript - 名称输入索引

javascript - 如何分割jquery数组

javascript - 即使命名约定正确,AngularJS 指令也未应用

javascript - 需要 JQuery 建议

javascript - ComputeDistanceBetween 返回 NaN 而不是距离