2015-08-24 77 views
0

我有一個gridview,我添加了一個複選框列。爲什麼不復選框首次選擇所有不適用於Firefox的?

隨着複選框,選中所有,我使用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

對不起,我的英語不好。

非常感謝,

張庭麥

+1

添加您的完整代碼,HTML和Javascript,也當'checkBoxSelectAll'被稱爲 – Tushar

+0

'$( 「#chkSelectAll」)。點擊(函數(){'不必我認爲....'function checkBoxSelectAll(){ var $ all = $(「#chkSelectAll」); $('input:checkbox')。not($ all).prop('checked',$ all [0] .checked); }' –

+0

可以包含'html','js'在問題? – guest271314

回答

1

要調用javascript函數checkBoxSelectAll每次點擊全選複選框,每次點擊註冊處理。相反,當文檔加載時,您只需註冊點擊句柄或更改處理程序一次。

嘗試下面的代碼

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

是的,它應該準備好',但OP說它可以在除FF以外的其他瀏覽器上工作,你能解釋爲什麼嗎? – Tushar

+0

OP在'checkBoxSelectAll'函數內註冊這個點擊處理程序,因此有多個點擊處理程序被註冊爲相同的複選框,這是不必要的。這些多個處理程序可能會造成問題,瀏覽器可能無法正確識別處理程序並造成混亂。相反,當頁面加載和處理程序可以按預期工作時,OP可以註冊一次。 –

+0

@BhushanKawadkar這是邏輯上是真的......如果op在onclick處理程序上調用方法......關於哪個OP沒有提到任何關於..那麼它是如何在其他瀏覽器上工作 –

0

隨着問題上面給出的是你如何註冊事件處理程序。你只是在all checkbox的變化中添加了實際設置checked屬性的處理程序,所以當第一次點擊發生時,真正改變checked屬性的處理程序不存在,因此它不會被觸發。

當第二點擊情況,您已經添加了一個單擊處理程序,這將添加所需的點擊行爲,但現在要添加一個額外的點擊處理程序,以便第三點擊就會觸發jQuery的處理器的兩倍。

作爲解決方案上面討論的是使用登記在DOM準備好處理像

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

但是回到它爲什麼在鉻工作的一個單一的點擊處理,我認爲這是因爲事件處理程序的選擇,你選擇,你是在onchange處理程序調用checkBoxSelectAll,但它看起來像changeclick處理訂單的訂貨推遲在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" />

+0

http://jsfiddle.net/arunpjohny/krhwvdy1/4/ –

相關問題