在单击按钮时使用 jquery 检查标记所有复选框答案

【问题标题】：check marking all the checkbox using jquery on click of a button在单击按钮时使用 jquery 检查标记所有复选框
【发布时间】：2010-02-11 18:41:44
【问题描述】：

这就是我的表结构的样子，

 <table>
    <tbody>   
    <tr>
    <td id="**SelectCheckBox**" class="helpBod">
    <input id="TimeSheetWebUserControl1_TimeSheetRepeater_ctl01_CheckBox0" type="checkbox"  name="TimeSheetWebUserControl1$TimeSheetRepeater$ctl01$CheckBox0"/>
    </td>
    <td>
    </td>
    </tr>
    <tr>
    <td id="**SelectCheckBox**" class="helpBod">
    <input id="TimeSheetWebUserControl1_TimeSheetRepeater_ctl02_CheckBox1" type="checkbox"  name="TimeSheetWebUserControl1$TimeSheetRepeater$ctl02$CheckBox1"/>
    </td>
   <td>
    </td>
    </tr>
    <tr>
    </tbody>
</table>

我有一个按钮 SelectAll 我将调用一个 jquery 函数来选中所有复选框

函数看这个

function jqCheckAll() {
        $("td#" + 'SelectCheckBox' + 'input:checkbox').attr('checked', true);

      }

问题是这将只勾选复选框如果我有 100 个复选框，我想在单击全选按钮时勾选所有这 100 个复选框。

【问题讨论】：

标签： jquery

【解决方案1】：

@sameer，您要做的是为您要检查的所有复选框添加一个类。在这里，我在将要检查的复选框中添加了一个类“checkall”。

<input type="button" name="checkit" id="checkit" value="Check All">

 <table>
    <tbody>   
    <tr>
    <td>
    <input type="checkbox" class="checkall" name="TimeSheetWebUserControl1$TimeSheetRepeater$ctl01$CheckBox0" id="TimeSheetWebUserControl1_TimeSheetRepeater_ctl01_CheckBox0" />
    </td>
    <td>
    <input type="checkbox" name="chk1" id="chk1" />
    </td>
    </tr>
    <tr>
    <td>
    <input type="checkbox" class="checkall" name="TimeSheetWebUserControl1$TimeSheetRepeater$ctl02$CheckBox1" id="TimeSheetWebUserControl1_TimeSheetRepeater_ctl02_CheckBox1" />
    </td>
    <td>
   <input type="checkbox" name="chk2" id="chk2" />
    </td>
    </tr>
    <tr>
    </tbody>
</table>

那么 jQuery 就很简单了。

$('#checkit').click(function() {
    $('input:checkbox.checkall').attr('checked','checked');
    return false;
});

【讨论】：

【解决方案2】：

首先，我不知道你所说的“SelectCheckBox”是什么意思；您不能为所有复选框赋予相同的“id”值。

要检查所有“helpBod”td 元素中的所有复选框，只需执行以下操作：

$('td.helpBod input:checkbox').attr('checked', true);

【讨论】：

提供相同的名称或 id 将导致 DOM 中的数组正确。
嗯，是的，但你绝对不应该那样做。它会混淆像 jQuery 这样的库。 “id”应该是identifier，两个不同的事物拥有相同的标识符是没有意义的。如果您需要多个元素相似，请使用“类”值。

【解决方案3】：

function jqCheckAll() {
    $("input:checkbox").attr('checked','checked');
}

更新，只签入单列：

假设您的 select_all 按钮与复选框位于同一 td 内，只需执行以下操作：

$('td.helpBod .select_all').click(function(e){
    e.preventDefault();
    $(this).closest('td.helpBod').find(':checkbox').attr('checked', 'checked');
});

再次假设您的 HTML 看起来像这样（select_all 不必是按钮）：

<td class="helpBod" ... >
  <button class="select_all">Select All</button>
  <input type="checkbox" ... />
  <input type="checkbox" ... />
  <input type="checkbox" ... />
  <input type="checkbox" ... />
</td>

【讨论】：

感谢您提供详细信息，但如果我在其他列中再添加一个复选框，即使该复选框也会被选中。我只想检查感兴趣的列。
感谢 doug 提供的宝贵意见。

【解决方案4】：

如果我理解你的要求，最简单的方法是

$('.helpBod input:checkbox').attr('checked','checked');

这只会检查您拥有该课程的那些，因此您不会影响您可能在其他地方拥有的其他复选框。

【讨论】：