jquery 获取单选按钮组的值

Question

这是我的 html 代码:

<form name="dform">
<fieldset>
    <input type="radio" class="yes" name="g1" value="1"/> Yes<br/>
    <input type="radio" class="no" name="g1" value="0"/> No
</fieldset>
    <fieldset>
   <input type="radio" class="yes" name="g2" value="1"/> Yes<br/>
        <input type="radio" class="no" name="g2" value="0"/> No
    </fieldset>
    <fieldset>
    <input type="radio" class="yes" name="g3" value="1"/> Yes<br/>
        <input type="radio" class="no" name="g3" value="0"/> No
    </fieldset>
    <input type="reset" class="reset" value="RESET"/><BR/>
</form>
<div id="result">N/A</div>

我想设置这样的值:

1. 如果 yes 得到 3，结果将为“低”
2. 如果"is"获得 2 分，结果将为“中等”
3. 如果没有人获得 3 或 2 分，结果将为“高”
4. 不检查任何单选按钮将显示“N/A”
5. 每个是和否 1 分也会显示“N/A”

我已经尝试过像这样的 jquery 脚本:

function scoring(){
        var score_yes = 0;
        var score_no = 0;
        $(".yes:checked").each(function()){
            score_yes += parseInt ($(this).val());
        });

        $(".no:checked").each(function(){
            score_no += parseInt ($(this).val());
        });

        if($(score_yes)==3){
            $("#result").html('LOW');
        }else if($(score_yes)==2){
            $("#result").html('MEDIUM');
        }else if(($(score_no)==3){
            $("#result").html('HIGH');
        }else if($(score_no)==2){
            $("#result").html('HIGH');
        }else{
            $("#result").html('N/A');
        }
    }
$(document).ready(function(){
    $(".yes:checked").change(function(){
        scoring();
    });
 });

但是没有成功。我应该解决什么问题？

Answer 1

存在许多问题，从几个地方的额外括号到将 int 包装在 jquery 对象中(例如 $(score_yes))，再到绑定(bind) .yes:checked (我相信您想要 .yes, .no 因为这两个都会改变 #result)。您还可以做一些简化。我相信这就是您想要的:

fiddle

function scoring() {
    var score_yes = $(".yes:checked").size();
    var score_no = $(".no:checked").size();

    if (score_yes == 3) {
        $("#result").html('LOW');
    } else if (score_yes == 2) {
        $("#result").html('MEDIUM');
    } else if (score_no == 3) {
        $("#result").html('HIGH');
    } else if (score_no == 2) {
        $("#result").html('HIGH');
    } else {
        $("#result").html('N/A');
    }
}
$(document).ready(function () {
    $(".yes, .no").change(function () {
        scoring();
    });
});