jquery - 使用 jQuery 计算选中的单选按钮

Question

我有不同数量的单选按钮的页面。这些按钮有两个不同的类yes， 和no。当用户向下浏览页面时，我需要弄清楚他们选择了每个类的数量，并将其显示在<p>页面底部的 a 中。

当用户多次单击单选按钮时，我无法阻止将 1 添加到变量中。这是我的代码的 JS 小提琴：

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

由于某种原因，它根本不起作用，我不明白为什么。

Answer 1

尝试以下操作：

$(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)                        
    })
});

演示

Answer 2

而不是在单击时增加值，而是进行计数：

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

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

Answer 3

我会使用更改事件并每次查找复选框的数量。

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

小提琴

Answer 4

这是我将其更改为

          $(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);
    }
});
});​

Answer 5

您应该使用我认为的更改事件而不是单击事件。

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

注意：input:radio在选择器上使用表单:radio来避免全局搜索 dom，将其限制为仅输入元素。

请将 id 限制为单数：RadioGroup1_1是重复的 id。

注意：我使用类来计数，您可以使用该checked属性，但我认为基于 SO 上其他与性能相关的问题/答案，该类会更快。