La casella di controllo Intestazione controlla le righe di GridView ma l'interfaccia mostra altrimenti

Question

Ho una vista a griglia all'interno di un pannello di aggiornamento (moduli Web). La visualizzazione a griglia ha una casella di controllo di intestazione in modo che quando si fa clic sulla casella di controllo intestazione controlla tutte le caselle voce di sotto di essa, in questo modo:

<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> 

Avviso la funzione di chiamata onclick="toggleSelection(this);" questo assomiglia a questo:

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: "" }); 
     }); 
    } 

Questo viene dichiarato subito dopo document.ready all'interno di un tag script. Quando inizialmente carico la pagina e clicchiamo sulla casella di controllo, vengono selezionate anche tutte le righe nella griglia (grande ... funziona). Se deseleziono tutte le righe sono deselezionate (grandi opere). Nel momento in cui faccio nuovamente clic su di esso, l'interfaccia utente non cambia (tutti gli elementi non vengono controllati come dovrebbero).

ero curioso e su ispezione del markup che troppo aveva ragione, quando si fa clic l'intestazione di check it true ho elementi di fila che sono stati estratti:

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

E quando ho deselezionare l'intestazione si risponde correttamente in questo modo:

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

il mio problema è l'interfaccia utente non cambia, cioè le caselle di controllo non vengono visualizzati come da controllare anche se la marcatura lo mostra come ch ecked. Questo è dovuto ad essere all'interno di un aggiornamento?

Cosa posso fare per risolvere questo problema?

Answer 1

uso Prova jQuery prop invece di attr, accetta un valore booleano invece di utilizzare attr/removeAttr attributo verificato

Codice:

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: "" }); 
     }); 
    } 

Answer 2

È possibile utilizzare this.checked in javascript

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

o come Irvin Dominin aka Edward commentato

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

Answer 3

Quando si utilizza u * troverà tutte le caselle che contengono chkSelector nella loro id.

Utilizzare $ anziché * troverà tutte le caselle che terminano con chkSelector nel proprio ID.

I controlli in griglia vedranno il clientid alla fine dell'attributo id quando vengono visualizzati.

lavorare con il tuo codice:

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: "" }); 
     }); 
    } 

Answer 4

Le caselle di controllo sono spesso difficile poiché hanno diverse modalità di modifica del valore, come l'utilizzo della tastiera \ mouse, ecc.Mi consiglia il seguente approccio (dopo aver usato con successo nella produzione con le versioni precedenti di jQuery):

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

E poi nel vostro "toggle tutto pulsante", è possibile attivare il cambiamento di stato:

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