html标签thead效果javascript运行

Posted 2023-05-09

【中文标题】html标签thead效果javascript运行

【英文标题】：html tag thead effect javascript to run

【发布时间】：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 你检查过我给的解决方案了吗......它有效吗

【参考方案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");
        
    );
;