0

我创建了一个函数，用于选择 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。

4

2 回答 2

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 小提琴演示。

以上更新为：

$('#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 小提琴演示。

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

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

参考：

于 2013-04-23T09:53:15.220 回答
0

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

$("#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");
});

它运作良好，但如果选中单个复选框，我仍然很困惑在提交时验证？

于 2013-04-23T10:01:39.910 回答