jQuery：複数のラジオボタンフィールドのIF条件？

Question

https://jsfiddle.net/fbzf10x6/6/

<form action=""> 
<input type="radio" name="colour" value="black"> black 
<br> 
<input type="radio" name="colour" value="white"> white 
<br> 

<br> 

<input type="radio" name="form" value="round"> round 
<br> 
<input type="radio" name="form" value="triangle"> triangle 
<br> 

2つのフォームフィールド "色" と、表示する画像を決めラジオボタンで "フォーム" があります。色を選択すると、フィドルに見られるように動作します。

ユーザが2番目のフィールド（name = "forms"）の三角形をチェックすると、白い三角形が表示されます。彼がフォームで "色"と "丸"の黒をチェックすると、img srcをblack_round.jpgに変更する必要があります。

これは簡略化されたバージョンです。私は多くのフィールドと多くのオプションを最後に持っています。

ありがとうございました！

Answer 1

あなたのケースでは、次のスニペットを機能させるには、「イメージ名はblack_round.jpg、black_triangle.jpg、white_round.jpg、white_triangle.jpgのようにする必要があります。

詳細については、下記のスニペットをご確認ください。現時点ではイメージが存在しないため、画像srcをinspect要素でチェックする必要があります。しかし、サーバー上のイメージ名の名前を変更し、このコードで確認することができます。

$(document).ready(function() { 
 
\t var imgname = []; 
 
    $("input[name=colour]").click(function() { 
 
    \t \t imgname['colour'] = $(this).val(); 
 
     if(Object.keys(imgname).length == 2){ 
 
     $("#image").attr('src',imgname['colour'] +'_'+ imgname['form']+'.jpg'); 
 
     } 
 
    }); 
 
    
 
    $("input[name=form]").click(function() { 
 
    \t \t imgname['form'] = $(this).val(); 
 
     if(Object.keys(imgname).length == 2){ 
 
     $("#image").attr('src',imgname['colour'] +'_'+ imgname['form']+'.jpg'); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action=""> 
 
    <input type="radio" name="colour" value="black"> black 
 
    <br> 
 
    <input type="radio" name="colour" value="white"> white 
 
    <br> 
 

 
    <br> 
 

 
    <input type="radio" name="form" value="round"> round 
 
    <br> 
 
    <input type="radio" name="form" value="triangle"> triangle 
 
    <br> 
 

 
    </form> 
 

 
    <div><img id="image" src="http://4.bp.blogspot.com/-MuBXtqpPw7s/T31fChtWOOI/AAAAAAAAAWI/QRpSQv__DcM/s320/black%2B9.png"></div>