簡體   English   中英

用jQuery計算選中的單選按鈕

[英]Counting Checked Radio Buttons with jQuery

我的頁面上有不同數量的單選按鈕。 這些按鈕有兩個不同的類, yesno 當用戶瀏覽頁面時,我需要找出他們選擇的每個班級有多少個,並將其顯示在頁面底部的<p>中。

我在防止用戶多次單擊單選按鈕時無法將1添加到變量中遇到問題。 這是我的代碼的JS小提琴:

http://jsfiddle.net/AnWU3/3/

由於某種原因,它根本無法工作,我也不明白為什么。

請嘗試以下操作:

$(document).ready(function() {
    $('input:radio').change(function(){
        var yes = $('.yes:checked').length
        var no = $('.no:checked').length
        $('.yes_results').text(yes)
        $('.no_results').text(no)                        
    })
});

DEMO

而不是單擊時增加值,而是進行計數:

$('input.yes:checked').length

$('input.no:checked').length

我將使用change事件並每次找到復選框的數量。

$(".no,.yes").change(function() {        
    $('.yes_results').text($('.yes:checked').length);
    $('.no_results').text($('.no:checked').length);
});

小提琴

這是我將其更改為

          $(document).ready(function() {
var nos = 0;
var yeses = 0;
$(".no").click(function() {

    if($('.no').is(':checked')) {
        nos = nos + 1;
        alert(nos);
    }
});
$(".yes").click(function() {

     if($('.yes').is(':checked')) {
        yeses = yeses + 1;
        alert(yeses);
    }
});
});​

您應該使用我認為的change事件而不是click事件。

$('input:radio').change(function(){ 
   $('.yes_results').text($('input.yes:radio:checked').length) 
   $('.no_results').text($('input.no:radio:checked').length)                         
});

注意:在:radio選擇器上使用input:radio形式可以提高速度,這避免了對dom的全局搜索,將其限制為僅輸入元素。

請將ID限制為單數: RadioGroup1_1是重復的ID。

注意:我使用該類進行計數,您可以使用checked屬性,但是我認為基於SO上與性能相關的其他問題/答案,該類會更快。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM