html标签thead效果javascript运行答案

【问题标题】：html tag thead effect javascript to runhtml标签thead效果javascript运行
【发布时间】：2013-12-19 17:57:06
【问题描述】：

我有一张桌子。标题中的项目包含一个复选框。如果我单击复选框“selectAll”，它会检查表中的所有复选框。我不得不添加 jquery 表排序器。为此，我不得不使用thead。我的javascript因为tad而停止工作。如果我删除它，它工作正常并单击复选框会检查表中的所有其他复选框。

我的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");
        }
    });
});

有大神帮忙吗？

干杯

【问题讨论】：

见jsfiddle.net/arunpjohny/7hdGW/1我觉得不是thead的原因，用.prop()设置checked属性
还有使用的jQuery版本是什么
“我的 javascript 因tad而停止工作。”您是否在控制台中遇到错误？
它是 jquery-1.8.1.min.js。我在控制台“[15:41:26.371] 不推荐使用 getPreventDefault()。改用 defaultPrevented。”
@KingKhan 你检查过我给的解决方案了吗......它有效吗

标签： javascript jquery html checkbox

【解决方案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

【讨论】：

【解决方案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");
        }
    });
};

【讨论】：