将选定的类添加到最近的 tr答案

【问题标题】：Adding selected class to the closest tr将选定的类添加到最近的 tr
【发布时间】：2013-04-23 09:30:40
【问题描述】：

我创建了一个函数，用于选择带有 id selectall..的复选框上的所有复选框。

<tr class="">
    <td width="5%" class="center"><input type="checkbox" onclick="" value="0" id="selectall" name="chkRecordId"></td>
</tr>

<tr id="row_21" class="even">
     <td class="center"><input type="checkbox" id="CategoryCheckIn" value="21" class="case" name="data[Category][checkIn][]"></td>
</tr>

<tr id="row_1" class="odd">
    <td class="center"><input type="checkbox" id="CategoryCheckIn" value="1" class="case" name="data[Category][checkIn][]"></td>
 </tr>

像这样。现在我想添加代码以选择所有带有 .case 类的复选框以及将类添加到最近的 tr 'selected'

在复选框选择的情况下功能运行良好。但是我对向 tr 添加类感到困惑。虽然我已经尝试过我的代码在这里被写下来。如果单击全选，则 addClass 会失败。

$(function(){
$("#selectall").click(function () {
    $('.case').attr('checked', this.checked).closest("tr").addClass("selected");
});

$(".case").click(function(){
    $(this).closest("tr").toggleClass("selected");
    if($(".case").length == $(".case:checked").length) {
        $("#selectall").attr("checked", "checked");
    } else {
        $("#selectall").removeAttr("checked");
    }
});

$(".case:checked").each(function() {
    $(this).closest("tr").addClass("selected");
});

});

我有 id 为“提交”的提交按钮，如果选中任何 checkbox.case，我想检查提交点击，否则返回 false。

【问题讨论】：

如果你使用的是 jQuery 1.6+，你应该看看.prop()

标签： jquery

【解决方案1】：

我建议如下：

$('#selectall').change(function () {
    var thisClosest = $(this).closest('tr'),
        checked = this.checked;
    // selecting the elements by class:
    $('.case')
    // setting the property (not the attribute) to be equal that of #selectall
    .prop('checked', checked)
    // finding the closest tr element of each of those check-boxes
    .closest('tr')
    // adding the closest tr of the #selectall element (cached earlier)
    // then calls the addClass() or removeClass() methods depending on
    // the #selectall being checked (addClass()) or unchecked (removeClass())
    .add(thisClosest)[checked ? 'addClass' : 'removeClass']('selected');
});

$('.case').change(function(){
    $(this).closest('tr')[this.checked ? 'addClass' : 'removeClass']('selected');
});

JS Fiddle demo.

以上更新为：

$('#selectall').change(function () {
    var thisClosest = $(this).closest('tr'),
        checked = this.checked;
    $('.case').prop('checked', checked).closest('tr').add(thisClosest)[checked ? 'addClass' : 'removeClass']('selected');
});

$('.case').change(function () {
    var that = this,
        $that = $(that),
        checked = that.checked,
        $selectall = $('#selectall');
    $that.closest('tr').add($selectall.closest('tr'))[checked ? 'addClass' : 'removeClass']('selected');
    $selectall.prop('checked', false);
});

JS Fiddle demo.

关于您最初的问题，关于如何检查提交时检查的任何 .case 元素：

$('form').submit(function(e){
    if (!$('.case:checked').length) {
        return false;
    }
});

参考资料：

【讨论】：

如果未选中单独的复选框，它不会删除类。
我没有意识到你也需要那个方面，我很抱歉。答案已更新/编辑以包含。
@sankalp：现在已编辑以删除 #selectall 的检查元素是否未选中（这似乎是/期望的响应）。
你熟悉CakePhp吗？实际上，我很困惑将这个表单返回函数放在上面。我知道方法，但是如果我使用$this->Js->submit，它将如何实现？你有什么想法继续下去吗？
我投票 +10 编写最小化代码。我一直希望这样做。 :)

【解决方案2】：

虽然我的代码有点长，但我找到了完美的解决方案。

$("#selectall").click(function () {
    $('.case').attr('checked', this.checked);
    if($('.case').prop('checked'))
        $('.case').closest("tr").addClass("selected");
    else
        $('.case').closest("tr").removeClass("selected");
});

$(".case").click(function(){
    $(this).closest("tr").toggleClass("selected");
    if($(".case").length == $(".case:checked").length) {
        $("#selectall").attr("checked", "checked");
    } else {
        $("#selectall").removeAttr("checked");
    }
});

$(".case:checked").each(function() {
    $(this).closest("tr").addClass("selected");
});

它运作良好，但我仍然困惑于验证是否选中了单个复选框？

【讨论】：