Question

我有一张桌子。 thead中的项目包含一个复选框。如果我单击“selectAll”复选框，它将检查表中的所有复选框。我不得不添加jquery tablesorter。为此，我不得不使用thead。由于thead，我的javascript停止了工作。如果我删除了它，它工作正常，单击复选框检查表中的所有其他复选框。

我的HTML是：

<thead>
<tr>
<th id="idCheckBox"><input type="checkbox" id="selectAll"/> All</th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th id="idEsc">Column 4</th>
<th>Column 5</th>
<th id="idComments">Column 6</th>
<th id="idSuspend">Column 7</th>
</tr>
</thead>

我的java脚本功能是：

$( function() {
    // add multiple select / deselect functionality
    $("#selectAll").click( function() {
        $('.case').attr('checked', this.checked);
    });

    $(".case").click( function() {

        if ($(".case").length == $(".case:checked").length) {
            $("#selectAll").attr("checked", "checked");
        } else {
            $("#selectAll").removeAttr("checked");
        }
    });
});

有任何大师在那里寻求帮助吗？

干杯

Answer 1

我认为这不是因为thead。使用.prop()设置已检查的属性值

$(function () {
    // add multiple select / deselect functionality
    $("#selectAll").click(function () {
        $cases.prop('checked', this.checked);
    });

    var $cases = $(".case").click(function () {
        $("#selectAll").prop("checked", $cases.not(':checked').length == 0);
    });
});

演示：Fiddle

Answer 2

我通过在javascript中添加一个函数名称并在复选框的onclick事件上调用它来解决问题。

我的HTML是：

<th id="idCheckBox"><input type="checkbox" id="selectAll" onclick="selectCheckBoxes()"/> All</th>

和java脚本：

function selectCheckBoxes(){
    // add multiple select / deselect functionality
    $("#selectAll").click( function() {
        $('.case').attr('checked', this.checked);
    });

    $(".case").click( function() {

        if ($(".case").length == $(".case:checked").length) {
            $("#selectAll").attr("checked", "checked");
        } else {
            $("#selectAll").removeAttr("checked");
        }
    });
};

html标签thead效果javascript运行

2 个答案: