標題複選框檢查gridview行，但接口顯示，否則

我有更新面板（網絡表單）內的gridview。網格視圖有一個標題複選框，以便當您單擊標題複選框，它會檢查它下面的所有項目的複選框，就像這樣：標題複選框檢查gridview行，但接口顯示，否則

<asp:TemplateField> 
     <HeaderTemplate> 
       <asp:CheckBox ID="HeaderLevelCheckBox" runat="server" 
       onclick="toggleSelection(this);" ToolTip="Select/Deselect all rows?" /> 
     </HeaderTemplate> 
     <ItemTemplate> 
      <asp:CheckBox ID="chkSelector" runat="server" ToolTip="Select row?" /> 
     </ItemTemplate> 
</asp:TemplateField>

注意函數調用onclick="toggleSelection(this);"這看起來是這樣的：

function toggleSelection(source) { 
     $("#MainContent_gvCG input[id*='chkSelector']").each(function (index) { 
      $(this).attr('checked', source.checked); 
      if (source.checked) 
       $(this).css({ backgroundColor: "yellow" }); 
      else 
       $(this).css({ backgroundColor: "" }); 
     }); 
    }

這是在腳本標記中的document.ready之後聲明的。當我最初加載頁面並單擊headercheckbox時，gridview中的所有行也被選中（很好...）。如果我取消選中所有行都未選中（很棒的作品）。當我再次點擊它時，用戶界面不會改變（所有項目不會像他們應該檢查）。

我很好奇，並在檢查太是正確的標記，當我點擊的標頭，檢查，真的，我得到的是被檢查行項目：

<input id="MainContent_gvCG_chkSelector_5" type="checkbox" name="ctl00$MainContent$gvCG$ctl08$chkSelector" style="background-color: rgb(255, 255, 0);" checked="checked">

當我取消了頭它響應正確，象這樣：

<input id="MainContent_gvCG_chkSelector_5" type="checkbox" name="ctl00$MainContent$gvCG$ctl08$chkSelector" style="">

我的問題是，用戶界面不會改變，這意味着該複選框不顯示爲被選中，即使標記表明其爲CH ecked。這是由於在一個更新面板內？

我能做些什麼來解決這個問題？

來源

2013-12-18 JonH

嘗試使用jQuery ** prop **而不是** attr **，它接受bool值而不是attr/removeAttr checked –

@Iervin是工作'$（this）.prop（'checked'，source.checked）; ' – Emre

嘗試使用jQuery prop代替attr使用this.checked，它接受一個布爾值，而不是使用ATTR/removeAttr檢查屬性。

代碼：

function toggleSelection(source) { 
     $("#MainContent_gvCG input[id*='chkSelector']").each(function (index) { 
      $(this).prop('checked', source.checked); 
      if (source.checked) 
       $(this).css({ backgroundColor: "yellow" }); 
      else 
       $(this).css({ backgroundColor: "" }); 
     }); 
    }

來源

2013-12-20 23:12:32

我仍然不明白爲什麼這個工作，爲什麼我沒有工作......但你的作品... – JonH

我認爲，因爲道具在任何情況下工作與布爾值;要使用attr添加/刪除已選狀態，必須使用attr來添加和刪除屬性。 –

你可以在你的JavaScript

function toggleSelection(source) { 
     $("#MainContent_gvCG input[id*='chkSelector']").each(function (index) { 
      this.checked = source.checked; 
     }); 
    }

或Irvin Dominin aka Edward評論

$(this).prop('checked', source.checked);

來源

2013-12-20 21:43:16 Emre

當U使用*就會發現其中包含其ID chkSelector所有複選框。

使用$而不是*它會發現所有以chkSelector結尾的chechbox在他們的id中。

gridview中的控件在渲染時將在id屬性的末尾有clientid。

與您的代碼工作：

function toggleSelection(source) { 
     $("[id$='chkSelector']").each(function (index) { //Use $ here insted of * 
      $(this).prop('checked', source.checked);//also use prop instead of attr 
      if (source.checked) 
       $(this).css({ backgroundColor: "yellow !important" });//also use !important 
      else 
       $(this).css({ backgroundColor: "" }); 
     }); 
    }

來源

2013-12-26 07:37:42

爲什麼使用'！important'？它設置爲樣式屬性，所以它具有最大優先級 – Grundy

可能是一些風格必須是ovriding所以..我認爲 –

複選框往往是棘手的，因爲他們有改變值的多種模式，如使用鍵盤\鼠標等。我建議以下辦法（已使用jQuery的以前版本用它成功地在生產中）：

$("[id$='chkSelector']").on('change', function() { 
    if ($(this).is(':checked')) 
     $(this).css({ backgroundColor: "yellow" }); 
    else 
     $(this).css({ backgroundColor: "" }); 
    });

，然後在「切換所有按鈕」，就可以觸發狀態變化：

$("[id$='chkSelector']").each(function (index) { 
    $(this).prop('checked', !$(this).is(':checked')); 
});

來源

2013-12-27 18:38:12 arviman

標題複選框檢查gridview行，但接口顯示，否則

回答

相關問題