Question

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

当用户多次点击一个单选按钮时，我遇到了阻止1添加到变量的问题。这是我的代码中的JS小提琴：

由于某些原因它根本不工作，我不明白为什么。

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

DEMO

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

FIDDLE

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上的其他与性能相关的问题/答案，课程会更快。

使用jQuery计算已检查的单选按钮

5 个答案: