JQ单选按钮值问题

Question

我有一个包含三组单选按钮的表单。每个单选按钮的值都在 0 到 3 之间。然后我有一些 JS/JQ 查看哪个按钮被选中，获取值，将它们加在一起然后使用该数字 post 一个特定的回复。我的问题是我似乎无法正确选择值。求助！

<input type="radio" name="answer-q1" value="0"><span class="answer-text">Strongly Disagree</span>

var totalPoints = 0;
var q1 = $('input:radio[name=answer-q1]:checked').find(':value').val();
var q2 = $('input:radio[name=answer-q2]:checked').find(':value').val();
var q3 = $('input:radio[name=answer-q3]:checked').find(':value').val();
totalPoints = q1 + q2 + q3;

我尝试了几种不同的方法，但没有成功。我敢肯定答案就在我面前，但我没有看到。如果有人有任何建议，我将不胜感激。谢谢

我在下面添加了 JS/JQ 的其余部分：

 var totalPoints = 0;
var q1 = $('input[name=answer-q1]:checked', '#module5').val();
var q2 = $('input[name=answer-q2]:checked', '#module5').val();
var q3 = $('input[name=answer-q3]:checked', '#module5').val();
totalPoints = q1 + q2 + q3;
$("button").on('submit', function(e) {
    if (totalPoints >= 0 && totalPoints <= 4) {
        $('.content').html('<p>text goes here</p>');
    } else if (totalPoints >= 5 && totalPoints <= 9) {
        $('.content').html('<p>text goes here</p>');
    }
});

Answer 1

使用这个不需要使用.find(':value')Demo here查看演示

$(".submit").click(function(){

var totalPoints = 0;
var q1 = parseInt($('input:radio[name=answer-q1]:checked').val());
var q2 = parseInt($('input:radio[name=answer-q2]:checked').val());
var q3 = parseInt($('input:radio[name=answer-q3]:checked').val());
totalPoints = q1 + q2 + q3;

    alert(totalPoints);
    if (totalPoints >= 0 && totalPoints <= 4) {
        $('.content').html('<p>Text goes here.</p>');
    } else if (totalPoints >= 5 && totalPoints <= 9) {
        $('.content').html('<p>Text goes here.</p>');
    }
});

Answer 2

你的代码有几个问题。

变量应该位于您的提交函数中。你的提交函数正在寻找 form 而不是 button，所以你的选择器应该是你的表单的 id$("#module5") 你的 JS 应该是这样的

<script>
    var totalPoints = 0;
    $("#module5").on('submit', function(e) {
        e.preventDefault();
        var q1 = parseInt($('input:radio[name=answer-q1]:checked').val());
        var q2 = parseInt($('input:radio[name=answer-q2]:checked').val());
        var q3 = parseInt($('input:radio[name=answer-q3]:checked').val());
        totalPoints = q1 + q2 + q3;
        if (totalPoints >= 0 && totalPoints <= 4) {
            $('.content').html('<p>Text goes here.</p>');
        } else if (totalPoints >= 5 && totalPoints <= 9) {
            $('.content').html('<p>Text goes here.</p>');
        }
    });
</script>

您的 HTML 的表单提交按钮应该是这样的（注意 type="submit"）
```
<input type="submit" class="submit" value="Submit Answer">
```

Answer 3

试试这个代码..

  <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 <script type="text/javascript" src="js/jquery-2.1.3.min.js" charset="utf-8"></script>
 <script>
 $( document ).ready(function() {
     $( "#check" ).click(function() {
         var v1=parseInt($("input[name=answer-q1]:checked").val());
         var v2=parseInt($("input[name=answer-q2]:checked").val());
         var v3=parseInt($("input[name=answer-q3]:checked").val());
         var ans=v1+v2+v3;
 alert(ans);

     });
    });
 </script>
</head>
<body>
Value1
<input type="radio"  name="answer-q1" value="1">1
<input type="radio"  name="answer-q1" value="2">2
<input type="radio"  name="answer-q1" value="3">3<br>
Value2
<input type="radio" name="answer-q2" value="1">1
<input type="radio" name="answer-q2" value="2">2
<input type="radio" name="answer-q2" value="3">3<br>

Value3
<input type="radio" name="answer-q3" value="1">1
<input type="radio" name="answer-q3" value="2">2
<input type="radio" name="answer-q3" value="3">3<br>
<button id="check">Click</button>
</body>
</html>

JQ单选按钮值问题

JQ radio button value issue

jquery

radio-button