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>

最佳答案

当触发更改事件时,您需要将元素 id="bbbbbb"的选中属性设置为 false。

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

你只需要添加

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

在更改事件中更改为您的 else 条件。

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

相关文章:

javascript - AJAX 页面中的 Jquery Datepicker

母版页头标记中的 Javascript

javascript - 如何设置动画持续时间以匹配动态页面加载时间?

javascript - 如何在按钮标签中添加条件? (vue.js 2)

javascript - ruby : Get files in asset pipeline

javascript - 如果我单击另一个div,则关闭弹出窗口

javascript - JQuery 从列表中获取所有数据属性

jquery - Flowplayer在模式窗口上方

javascript - jQuery:try catch {调用函数}不起作用?

javascript - JavaScript树无法正常工作