为什么第一次复选框不选择所有不适用于 Firefox？答案

【问题标题】：Why doesn't checkbox select all not working on Firefox at the first time?为什么第一次复选框不选择所有不适用于 Firefox？
【发布时间】：2015-08-24 13:35:52
【问题描述】：

我有一个gridview，我添加了一个复选框列。

使用复选框全选，我使用jQuery 来检查所有复选框。

以下代码是我尝试过的，

function checkBoxSelectAll() {
     $("#chkSelectAll").click(function () {
          $('input:checkbox').not(this).prop('checked', this.checked);
     });
 }

我在 MVC5 中使用了 DevExpress Gridview，这是我在 View 中的代码

@(Html.DevExpress()
      .GridView(settings =>
                    {
                        //settings.Settings.ShowVerticalScrollBar = true;
                        settings.Height = Unit.Percentage(100);
                        settings.SettingsPager.Mode = GridViewPagerMode.ShowAllRecords;
                        settings.Settings.ShowFooter = true;
                        settings.Name = "gvw1";
                        settings.Width = Unit.Percentage(100);
                        settings.CallbackRouteValues = new
                                                           {
                                                               Controller = "Vehicle",
                                                               Action = "ListPartial"
                                                           };
                        settings.SettingsBehavior.AllowGroup = false;
                        settings.SettingsBehavior.AutoExpandAllGroups = true;
                        settings.KeyFieldName = "Id";
                        settings.Columns.Add("VehicleGroupName", Html.GetResource("group")).GroupIndex = 0;
                        settings.Columns.Add(column =>
                        {
                            column.SetHeaderTemplateContent(content =>
                            {
                                ViewContext.Writer.Write(string.Format("<input type='checkbox' name='chkSelectAll' id='chkSelectAll' onchange='checkBoxSelectAll()'/>"));
                            });
                            column.SetDataItemTemplateContent(c =>
                            {
                                ViewContext.Writer.Write(string.Format("<input type='checkbox' name='chkID' id='" + @c.KeyValue + "' />"));
                            });
                        });

Devexpress Gridview 在下面生成 HTML

<tr id="gvw1_DXDataRow1" class="dxgvDataRow_DevEx">
    <td class="dxgvIndentCell dxgv" style="width:0px;border-left-width:0px;border-bottom-width:0px;">&nbsp;</td>
      <td id="gvw1_tccell1_1" class="dxgv" style="border-left-width:0px;">
        <input type="checkbox" name="chkID" id="1657">
      </td>
</tr>

它在 Chrome、Safari、Opera、IE11、Microsoft Edge 中运行良好。但是在Firefox中，第一次，它不起作用。（当我单击复选框全选时，未选中此网格视图中的所有复选框）。然后我取消选中复选框全选，然后我再次检查它，它工作，gridview中的所有复选框都被选中。

谁能告诉我为什么？

我正在使用jQuery 1.9.1。

对不起，我的英语不好。

非常感谢，

张梅

【问题讨论】：

添加您的完整代码、HTML 和 Javascript，以及何时调用 checkBoxSelectAll
$("#chkSelectAll").click(function () { 我认为不需要在那里.... function checkBoxSelectAll() { var $all = $("#chkSelectAll"); $('input:checkbox').not($all).prop('checked', $all[0].checked); }
可以在 Question 中包含 html , js 吗？
感谢您的回答，我已经在这个问题中添加了我的 HTML 代码。

标签： javascript jquery gridview checkbox

【解决方案1】：

您每次点击都调用javascript函数checkBoxSelectAll选择所有复选框并注册点击处理程序。相反，您只需在文档加载时注册一次点击句柄或更改处理程序。

试试下面的代码

$(document).ready(function(){
    $("#chkSelectAll").change(function () {
        $('input:checkbox').not(this).prop('checked', this.checked);
    });
});

【讨论】：

是的，它应该在ready，但是OP说它可以在除FF之外的其他浏览器上使用，你能解释一下原因吗？
OP 在checkBoxSelectAll 函数中注册此点击处理程序，因此有多个点击处理程序为同一个复选框注册，这是不必要的。这些多个处理程序可能会产生问题，浏览器可能无法正确识别处理程序并造成混乱。相反，当页面加载和处理程序可以按预期工作时，OP 可以注册一次。
@BhushanKawadkar 这在逻辑上是正确的......如果 op 在 onclick 处理程序上调用该方法......关于哪个 OP 什么也没说......那么它如何在其他浏览器上工作
我理解并同意，但It work good on Chrome, Safari, Opera, IE11, Microsoft Edge. But on firefox, at the first time, It doesn't work.。怎么样？
@Tushar，我过去遇到过同样的问题，我在加载元素时动态附加点击处理程序，并且在 Chrome 和 IE 上工作，但在 Firefox 上没有。所以我得出的结论是，这是多个处理程序的问题。我使用.off() 取消注册处理程序，然后注册.on()，所以它对我有用。我不知道为什么它适用于 chrome 但不适用于 firegfox。

【解决方案2】：

如上所述，问题在于您如何注册事件处理程序。您正在添加仅在更改 all checkbox 时实际设置选中属性的处理程序，因此当第一次单击发生时，真正更改选中属性的处理程序不存在，因此不会触发。

当第二次点击发生时，您已经添加了一个点击处理程序，它将添加所需的点击行为，但现在您正在添加一个额外的点击处理程序，因此第三次点击将触发 jQuery 处理程序两次。

如上所述，解决方案是使用在 dom 就绪处理程序中注册的单击处理程序，例如

jQuery(function ($) {
    $("#chkSelectAll").click(function () {
        $('input:checkbox').not(this).prop('checked', this.checked);
    });
})

但是回到为什么它在 chrome 中工作，我认为这是因为您选择的事件处理程序的选择，您在 onchange 处理程序中调用 checkBoxSelectAll，但它看起来像 @ 的顺序987654325@ 和 click 处理程序顺序在 FF 和其他浏览器中延迟。在 chrome 中，更改事件首先被触发，然后是点击处理程序......所以当点击处理程序被触发时，您的 checkBoxSelectAll 已经添加了导致点击工作的 jQuery 处理程序。但是在 FF 中，点击处理程序首先被触发，然后是更改处理程序，所以当点击被处理时，没有 jQuery 处理程序。

$("#chkSelectAll").on('click change', function(e) {
  snippet.log('event: ' + e.type)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<input id="chkSelectAll" type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />

【讨论】：