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>

次のように値を設定したいと思います。

1. yes が 3 の場合、結果は「Low」になります。
2. はいが 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

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

Answer 2

あなたはそれをもっと簡単に行うことができます：

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

Answer 3

一部の構文エラーと 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();
    });
 });

デモ

Answer 4

いくつかの場所での余分な括弧から、($(score_yes)たとえば) jquery オブジェクトでの int のラップまで、多くの問題がありました (両方が を変更するので、.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();
    });
});