Question

我有2个表单，我想添加这两个表单的值。例如：在q1中我选择2而在q2中我选择4，在我的课程结果中我想显示6。解决方案也应该使用30种形式：）

HTML

<div class="q1">
  <form>
    <input type="radio" name="q1" value="1"> 1                       
    <input type="radio" name="q1" value="2"> 2                       
    <input type="radio" name="q1" value="3"> 3
    <input type="radio" name="q1" value="4"> 4
  </form>
</div>

<div class="q2">
  <form>
    <input type="radio" name="q2" value="1"> 1                       
    <input type="radio" name="q2" value="2"> 2                       
    <input type="radio" name="q2" value="3"> 3
    <input type="radio" name="q2" value="4"> 4
  </form>
</div>

<div class="result"></div>

的jQuery

我得到了值，但我无法添加它们。

$('.q1').on('click',function(){
    var r1 = $('input[name=q1]:checked').val();
    $('.result').html(r1);
});

$('.q2').on('click',function(){
    var r2 = $('input[name=q2]:checked').val();     
    $('.result').html(r2);
});

JSFiddle

Answer 1

我建议在.q1和.q2包装元素中添加通用className，然后：

var $inputs = $('.question input[type=radio]').on('change', function () {
    var total = 0;
    $inputs.filter(':checked').each(function() {
        total += +this.value;
    });

    $('.result').text(total);
});

http://jsfiddle.net/t2fjnxcd/

Answer 2

我个人建议：

// binding a change-event handler to inputs of type radio:
$('input[type="radio"]').on('change', function(){
    // setting the text of .result:
    $('.result').text(function(){
        // iterating over the checked radios whose name begins with 'q':
        return $('input[type="radio"][name^="q"]:checked').map(
            function(){
                // returning the value of the current input, as a number:
                return +(this.value || 0);
            // converting the map into an array, and reducing the array into:
            }).get().reduce(function (a, b) {
            // the sum of the numbers of the array:
            return a + b;
        });
    });
});

JS Fiddle demo

参考文献：

阵列：
- `Array.prototype.reduce()。
jQuery的：
- get()。
- map()。
- on()。

Answer 3

这样的事情：

var r1=0, r2=0; 
$('.q1').on('click',function(){
    r1 = parseInt($('input[name=q1]:checked').val());
    $('.result').html( r1 + r2);
});

$('.q2').on('click',function(){
    r2 = parseInt($('input[name=q2]:checked').val());   
    $('.result').html( r1 + r2);
});

如何从多个无线电输入中添加值

3 个答案: