jquery - 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>

我想设置这样的值：

如果是得到 3，结果将是“低”
如果是得到 2 分，结果将是“中等”
如果没有得到 3 或 2 分，结果将是“高”
没有检查任何单选按钮将显示“N/A”
每个是和否的 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();
    });
 });

但它没有用。我应该修复什么？

score 1 · Accepted Answer

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

    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(){
   $("#dform input:radio").change(function(){
    scoring();
   });
});

score 1 · Accepted Answer

你可以更简单地做到这一点：

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

    if (score_no >= 2)
        return 'HIGH';
    else if (score_yes == 3)
        return 'LOW';
    else if (score_yes == 2)
        return 'MEDIUM';
    else
        return 'N/A';
}

$(document).ready(function(){
    $('input[type="radio"]').change(function(){
        scoring();
    });
});

score 1 · Accepted Answer

一些语法错误和 score_yes 不应该用 jQuery 包装

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

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

        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").change(function(){
        scoring();
    });
 });

演示

score 1 · Accepted Answer

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

小提琴

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

score 1 · Accepted Answer

我自己的建议是：

/* caching the radio inputs, to save time later
   (assuming there's a static collection): 
*/
var radios = $('input[type="radio"]');

// setting up the event-handler:
radios.change(function(){
    // filtering for how many '.yes' inputs are checked:
    var yes = radios.filter('.yes:checked').length,
    // filtering for how many '.no' inputs are checked:
        no = radios.filter('.no:checked').length;

    // setting the text of the '#result' element:        
    $('#result').text(function(){
        /* assuming a binary decision, then only, at most,
           half of the total number of elements can be checked, if they are
           all choices have been made:
        */
        if (yes + no === (radios.length)/2) {
            /* if 'yes' scores more than 1 (so either 2 or 3) we return 'Low',
               otherwise 'High':
            */
            return yes > 1 ? 'Low' : 'High';
        }
        // some are unchecked, therefore we return 'N/A':
        else {
            return 'N/A';
        }
    });
// triggering the 'change' event on DOM-ready, in case of default-checked radio inputs:
}).change();

JS 小提琴演示。

参考：

change().
filter().

score 1 · Accepted Answer

您的代码中有多个语法错误，您有额外的{或(不需要它们的地方。此外，您的主要问题是您的更改侦听器的选择器$(".yes:checked")，仅选择了已检查的单选按钮。您可以使用$("input[type='radio']")作为您的选择器来更改它。您可以在下面找到完整的示例

演示

$(document).ready(function () {
    $("input[type='radio']").change(function () {
        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');
        }
        });
    });

score 0 · Accepted Answer

有一个额外的括号：

$(".yes:checked").each(function() ) {

应该

$(".yes:checked").each(function(){

jquery - jquery获取单选按钮组的值

7 回答 7

Related

Reference