为什么不复选框首次选择所有不适用于Firefox的？

Question

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

随着复选框，选中所有，我使用jQuery检查所有的复选框。

下面的代码是什么，我都试过了，

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

我使用的DevExpress GridView的在MVC5，这是我在查看代码

@(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中的所有复选框都没有选中）。 然后，我取消选中复选框全选，然后再次检查它，它工作，GridView中的所有复选框将被检查。

任何人都可以告诉我为什么？我正在使用jQuery 1.9.1。

对不起，我的英语不好。

非常感谢，

张庭麦

Answer 1

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

尝试下面的代码

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

Answer 2

随着问题上面给出的是你如何注册事件处理程序。你只是在all checkbox的变化中添加了实际设置checked属性的处理程序，所以当第一次点击发生时，真正改变checked属性的处理程序不存在，因此它不会被触发。

当第二点击情况，您已经添加了一个单击处理程序，这将添加所需的点击行为，但现在要添加一个额外的点击处理程序，以便第三点击就会触发jQuery的处理器的两倍。

作为解决方案上面讨论的是使用登记在DOM准备好处理像

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

但是回到它为什么在铬工作的一个单一的点击处理，我认为这是因为事件处理程序的选择，你选择，你是在onchange处理程序调用checkBoxSelectAll，但它看起来像change和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" />