jQuery compte de manière incrémentielle la case à cocher sélectionnée et désélectionnée case à cocher

Question

J'ai un formulaire Web ASP.NET qui a 6 cases à cocher. 1 case à cocher est d'appeler une fonction pour sélectionner toutes les cases à cocher et afficher le message "Vous avez sélectionné" 6 "éléments" (dans ce cas, 6 case à cocher). Si un utilisateur ne sélectionne pas la case Sélectionner tout, il peut sélectionner ou désélectionner une autre case individuellement et le message sera "Vous avez sélectionné" # "éléments" J'essaye de le faire dans jQuery, mais cela ne fonctionne pas encore. Voici le script:

<script type="text/javascript"> 
    //This function works on the click event of SelectAll checkbox 
    function selectAll(involker) { 
     $('input:checkbox').attr('checked', $(involker).attr('checked')); 

     var count = $(":checkbox:checked").length; 
     $("#selectedCheckboxMessage").html(count).css({ 'background-color': '#228B22', 'font-weight': 'bolder', 'color': '#FFFFFF', 'padding-left': '0.5em', 'padding-right': '0.5em' }); 

    } 

    //Not working, the message wont's show up on the click event of the checkbox 
    $(function() { 

     $("input[id ^= ctl00_ContentPlaceHolder1_dlTimeSheet_ctl]").click(showCheckboxStatus); 

    }); 

    function showCheckboxStatus(evt) { 

     var numSelected = $(":checkbox:checked").length; 
     $("#selectedCheckboxMessage").html("You have selected " + numSelected).css({ 'background-color': '#228B22', 'font-weight': 'bolder', 'color': '#FFFFFF', 'padding-left': '0.5em', 'padding-right': '0.5em' }); 

    } 

Le message indique que si une case à cocher SelectAll est sélectionnée. Le message ne montre pas si une autre case est cochée ou désélectionnée.

Je cherche une case à cocher Id $ ("input [id^= ctl00_ContentPlaceHolder1_dlTimeSheet_ctl]") au lieu de chercher une classe CSS. Sur le balisage

<asp:CheckBox ID="cbMarkAsComplete" runat="server" CssClass ="CheckBoxClass" /> 

fera la sortie HTML suivant:

<span class="CheckBoxClass"><input type="checkbox" name="ctl00$ContentPlaceHolder1$dlTimeSheet$ctl00$cbMarkAsComplete" id="ctl00_ContentPlaceHolder1_dlTimeSheet_ctl00_cbMarkAsComplete"></span> 

La classe CSS CheckBoxClass est pas avec l'entrée HTML, c'est pourquoi je suis à la recherche de case à cocher Id au lieu de la classe de case à cocher.

Merci pour votre contribution.

Answer 1

Pour revenir seulement le nombre de cases cochées sur la page essayez de changer votre sélection un peu et en utilisant quelque chose comme ça

$("input[type='checkbox']:checked").length 

Cela devrait vous donner le nombre de cases cochées.

$("input:checked").length 

Fonctionne également mais je suis d'accord pour la spécificité.

Answer 2

Vous pourriez être mieux à l'aide d'un sélecteur comme $('.CheckBoxClass input:checkbox')

En ce qui concerne votre problème du nombre pas la mise à jour, je suis à la recherche sur cette ligne:

var numSelected = $("input.myCheckbox:checked").length; 

je ne vois pas la. MyCheckbox classe partout. J'essaie ça:

var numSelected = $('.CheckBoxClass input:checked').length;