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> 

Есть два форм-поля "цвет" и "формы" с радиокнопок, которые решают, какое изображение, чтобы показать. Выбор цвета работает, как видно на скрипке.

Если пользователь теперь проверяет треугольник во втором поле (name = "forms"), я хочу показать белый треугольник. Если он проверяет черный цвет в «цветном» и «круглом» формах, он должен изменить img src на black_round.jpg и так далее.

Это упрощенная версия. В конце концов, у меня будет много полей и еще много вариантов.

Благодарим за помощь!

Answer 1

Вам нужно будет взять «Имена изображений должны быть как black_round.jpg, black_triangle.jpg, white_round.jpg, white_triangle.jpg», чтобы сделать следующий фрагмент работы в вашем случае.

Пожалуйста, ознакомьтесь с нижеприведенным фрагментом, чтобы узнать больше. Вам нужно будет проверить изображение src, проверяя элемент, потому что никакое изображение не будет загружаться в настоящее время как таковое у нас нет этих изображений в настоящее время. Но вы можете переименовать имена изображений на свой сервер и проверить этот код.

$(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>