jQuery增量計數選定的複選框和取消選中的複選框

我有一個ASP.NET web窗體，有6個複選框。 1複選框是調用一個函數來選擇所有複選框，並顯示消息「您已選擇」6「項目」（在這種情況下，6複選框）。如果用戶沒有選擇全選複選框，他們可以單獨選擇或取消選中其他複選框，並且該消息將是「您已選擇」＃「項目」我試圖在jQuery中執行此操作，但它尚未運行。這裏的腳本：只有當選擇全選複選框jQuery增量計數選定的複選框和取消選中的複選框

<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' }); 

    }

的消息顯示。該消息不顯示是否選中或取消選擇其他複選框。

我查找複選框Id $（「input [id^= ctl00_ContentPlaceHolder1_dlTimeSheet_ctl]」）而不是查找CSS類。在標記

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

會使以下HTML輸出：

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

的CSS類CheckBoxClass不與HTML的輸入，這就是爲什麼我在尋找複選框ID而不是複選框類。

感謝您的意見。

來源

2010-01-27 narazana

我承認這一點，我讀了三遍，但我仍然不明白究竟是什麼工作，什麼不是。 – 2010-01-27 18:32:02

這裏是選中所有複選框的標記，並且它正確顯示消息但其他複選框不起作用，無論是選中還是取消選中，郵件都不會顯示。其他複選框的OnClick事件不起作用，我認爲。我真的不知道問題在哪裏。 – narazana 2010-01-27 18:46:38

要返回頁面中選擇複選框的只是數量嘗試了一下週圍改變你的選擇和使用這樣的事情

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

這應該給你選中的複選框的數量。

$("input:checked").length

也可以工作，但我是一個專門性的dork。

來源

2010-01-27 18:31:15 HurnsMobile

你可能會使用類似$('.CheckBoxClass input:checkbox')

至於你的號沒有更新問題的一個選擇會更好，我期待在這一行：

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

我沒有看到。 myCheckbox類的任何地方。試試這個：

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

來源

2010-01-27 18:32:34 Ender

jQuery增量計數選定的複選框和取消選中的複選框

回答

相關問題