複数のチェックボックスの2つの値だけを取得

Question

私はこのコードをcodeLABで見つけました。「クリケット」と「ボクシング」がチェックされている場合にのみ真の結果を得ようとしています。現在のところ、両方がチェックされている場合だけでなく、他のものが選択されている場合にも機能します。

https://jsfiddle.net/kubus1234/oksm8eaw/

$("button").click(function() { 
    var favorite = []; 
    $.each($("input[name='sport']:checked"), function() { 
    favorite.push($(this).val()); 
    }); 
    var test = []; 
    $.each($("input[name='sport']:checked"), function() { 
    test.push($(this).val()); 
    }); 
    if (favorite[1] == "cricket" || test[1] == "boxing") { 
    alert("Your are the best"); 
    } else { 
    alert("Your are looser"); 
    } 
}); 

任意のソリューション？

Answer 1

ないあなたが二回選択したチェックボックスを横断するが、ここではあなたの結果を得るための一つの方法だ理由を確認してください。

$(document).ready(function() { 
 
    $("button").click(function() { 
 
    var selected = $("input[name='sport']:checked").toArray().map(function(checkbox) { 
 
    \t return $(checkbox).val(); 
 
    }); 
 
    
 
    if (selected.length === 2 && selected[0] === "cricket" && selected[1] === "boxing") { 
 
     alert("You are the best"); 
 
    } else { 
 
     alert("You lose"); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <h3>Select your favorite sports:</h3> 
 
    <label> 
 
    <input type="checkbox" value="football" name="sport">Football</label> 
 
    <label> 
 
    <input type="checkbox" value="baseball" name="sport">Baseball</label> 
 
    <label> 
 
    <input type="checkbox" value="cricket" name="sport">Cricket</label> 
 
    <label> 
 
    <input type="checkbox" value="boxing" name="sport">Boxing</label> 
 
    <label> 
 
    <input type="checkbox" value="racing" name="sport">Racing</label> 
 
    <label> 
 
    <input type="checkbox" value="swimming" name="sport">Swimming</label> 
 
    <br> 
 
    <button type="button">Get Values</button> 
 
</form>

Answer 2

私は両方のチェックボックスが.is(":checked")

を一度にチェックされた場合、私がチェックするためにJavaScriptを変更）チェックボックスのidに

2を与えた）これは簡単にresearchableだろうが、私はとにかく

1の解決策を投稿します

<form> 
    <h3>Select your favorite sports:</h3> 
    <label><input type="checkbox" id="chkFootball" value="football" name="sport"> Football</label> 
    <label><input type="checkbox" id="chkBaseball" value="baseball" name="sport"> Baseball</label> 
    <label><input type="checkbox" id="chkCricket" value="cricket" name="sport"> Cricket</label> 
    <label><input type="checkbox" id="chkBoxing" value="boxing" name="sport"> Boxing</label> 
    <label><input type="checkbox" id="chkRacing" value="racing" name="sport"> Racing</label> 
    <label><input type="checkbox" id="chkSwimming" value="swimming" name="sport"> Swimming</label> 
    <br> 
    <button type="button">Get Values</button> 
</form> 

    $(document).ready(function() { 
    $("button").click(function(){ 
     if ($('#chkCricket').is(':checked') && $('#chkBoxing').is(':checked')) { 
      alert("Checked"); 
     } 
     else { 
      alert("Not checked"); 
     } 
    }); 
}); 

Answer 3

https://jsfiddle.net/oksm8eaw/2/

javascriptのアラートを使用しないでください。アラートは、がん... ...代わりにIDを使用して、jQueryのhtml()を引き起こす：HTMLにこれを追加する：1の場合<div id="result"></div>

ソリューション

$(document).ready(function() { 
    $("button").click(function(){ 
     var matchCount = 0; 
     $('input').each(function(){ 
       if(this.value == "cricket" || this.value == "boxing") { 
       if(this.checked) matchCount++; 
      } 
     }); 

     if(matchCount>1){ 
      $("#result").html("YUP!"); 
     } else { 
      $("#result").html("NOPE!"); 
     } 
    }); 
});