使用 jQuery 将值传递给结果

Question

我有一个简单的形式：

<form id="radio_form">
  <fieldset>
    <label><input type="radio" name="color" value="1" />Red</label><br />
    <label><input type="radio" name="color" value="2" />Yellow</label><br />    
    <label><input type="radio" name="color" value="3" />Blue</label><br />
    <label><input type="radio" name="color" value="4" />Purple</label><br />
  </fieldset>

   <fieldset>
    <label><input type="radio" name="time" value="6" />12</label><br />
    <label><input type="radio" name="time" value="7" />11</label><br />    
    <label><input type="radio" name="time" value="8" />10</label><br />
    <label><input type="radio" name="time" value="9" />9</label><br />
  </fieldset>
</form>

我试图将两个选定的值作为总和传递给 .result ，不幸的是 .result 仅显示第一个输入[颜色]中的值。我如何获取输入[颜色]和输入[时间]的结果？

这是我的职责：

$(function(){
    var value = $('input:radio:checked').val();

    $('.result').html(value)


});

非常感谢您的提前帮助。

多姆

Answer 1

与大多数 jQuery 的 getter 重载一样，val() 仅返回第一项的值。您可以使用map()并加入结果数组：

$(function() {
    var value = $('input:radio:checked').map(function() {
        return this.value;
    }).get().join(" ");  // You could join with a comma if you like

    $('.result').text(value);  // Use text() unless you're adding HTML
});

---

啊，看来您正在追求运行总计。在这种情况下，您需要使用 each() 来代替：

$(function() {
    var value = 0;

    $('input:radio:checked').each(function() {
        value += +this.value;
    });

    $('.result').text(value);  // Use text() unless you're adding HTML
});

上面代码中的 +this.value 将值强制转换为数字。

Answer 2

$(function(){
    $(".result").html(""); // clear result
    $("input:radio:checked").each(function() {
        $(".result").append($(this).val()); // append value of each matched selector
    });
});