选中一个复选框选中所有复选框答案

【问题标题】：checking one checkbox checks all the checkbox选中一个复选框选中所有复选框
【发布时间】：2012-04-09 12:58:41
【问题描述】：

如果选中一个复选框，我想检查所有其他复选框。我的代码

<tr>
    <td class="small"><asp:CheckBox ID="chkReportModuleName" runat="server" name="report"></asp:CheckBox></td>
    <td class="particulrs"></td>
    <td class="small"><asp:CheckBox ID="chkReportAdd" runat="server" name="reports"></asp:CheckBox></td>
    <td class="small"><asp:CheckBox ID="chkReportEdit" runat="server" name="reports"></asp:CheckBox></td>
    <td class="small"><asp:CheckBox ID="chkReportDelete" runat="server" name="reports"></asp:CheckBox></td>
    <td class="small"><asp:CheckBox ID="chkReportView" runat="server" name="reports"></asp:CheckBox></td>
    <td class="small"><asp:CheckBox ID="chkReportPrint" runat="server" name="reports"></asp:CheckBox></td>
    <td class="othr"><span><input type="checkbox" id="chkReportActivity1" name="reports" /></span></td>
</tr>

选中名为报告的复选框。我想检查所有名为报告的复选框。

有人可以帮我解决这个问题吗？谢谢

【问题讨论】：

标签： javascript jquery asp.net

【解决方案1】：

好的：

$('input[name="report"]').click(function(){
   $('input[name="reports"]').prop("checked", this.checked);
});

点击“报告”复选框后，所有“报告”复选框将设置为与“报告”相同的状态。如果您希望它仅以一种方式工作，即如果取消选中“报告”复选框不应取消选中其他复选框，则执行以下操作：

$('input[name="report"]').click(function(){
   if (this.checked)
       $('input[name="reports"]').prop("checked", true);
});

以上内容应该放在 document.ready 处理程序和/或出现在所有复选框之后的脚本块中。

如果您使用的是旧版本的 jQuery，则需要使用 .attr() 而不是 .prop()。

简单演示（也展示了如何使用 document.ready）：http://jsfiddle.net/eHLcS/

【讨论】：

它不工作。我希望报告被选中而不是点击。
我添加了一个简单的演示（基于您的 html），展示了它的实际效果。对于复选框，单击事件会在选中或取消选中该框时发生——即使是通过键盘完成的。但正如我所说，您需要将上述内容放在 document.ready 处理程序和/或实际复选框之后的脚本块中。
我不明白我哪里出错了我已经按照你展示的方式实现了。
您的 ASP 代码生成的 html 是否与我在演示中放置的相似？您使用的是什么版本的 jQuery？（如果早于 1.6，请使用 .attr() 而不是 .prop()。）
我认为 asp:Checkbox 可能有问题，因为它生成的名称与我指定的名称不同

【解决方案2】：

试试这个：

$('input[name="report"]').change(function() {
    $('input[name="reports"]').attr("checked", $(this).is(":checked"));
});

【讨论】：

对不起，有一个错字，现在试试吧。

【解决方案3】：

使用这个：

$(function(){

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

#selectall 是您的“报告”复选框的 ID，.case 是您希望在单击 #selectall 时选中的所有复选框的 cssclass

对于较新版本的 jquery，您还可以使用 prop 函数而不是 attr

【讨论】：

希望你已经添加了对 jquery 文件的引用
使用此链接可能对您有所帮助wiseguysonly.com/2010/01/15/…
该链接提出了一种不必要的复杂方法来实现这一点。您自己的答案要好得多，尽管它需要对 OP 的 html 进行一些更改才能起作用。
这个工作正常：jsfiddle.net/mdAbw 其他可能的原因可能是其他 jqueries 无论如何尝试将上述脚本放在正文标记的最底部，或者首先使用 $(document).ready(function() 而不是 $(function()仅行...

【解决方案4】：

在所有复选框的onclick事件中附加以下功能（名称=='report'）

function CheckAllReportCheckboxes()
{
    var elm = document.getElementsByTagName("input");
    for (i = 0; i < elm.length; i++) {
        if (elm[i].type == "checkbox" && elm[i].name == 'report') {
                elm[i].checked = 'checked';
        }
    }
}

请记住，取消选中复选框将不起作用。

【讨论】：