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/

相关文章:

javascript - 哪个 JavaScript 框架可以搜索 CSS 样式表规则并编辑它们的属性?

javascript - WebView - 有什么方法可以编辑加载的网页吗?添加一些脚本或样式?

jquery - 隐藏输入与 HTML5 数据属性

Javascript/JQuery 遍历数组值

php - 使用 phonegap 提交带有数据和图像的表单

javascript - 我的 Google Chrome JavaScript 控制台中的 "Uncaught TypeError: undefined is not a function"

javascript - 寻找线段和贝塞尔曲线交点的程序

javascript - 计数器在 jQuery 中不起作用

javascript - 将变量传递给 .animate Step 函数

javascript - 如何在 Firebug 中保存所有 JavaScript 文件?