0

Добрый день, возник вопрос, есть 3 группы radio button, нужно что-бы при различных комбинациях выводилась определённая картинка, под каждую комбинацию своя. Помогите советом как это организовать ?

<input type="radio" name="1" class="radio" id="radio-001" value="001" >
<input type="radio" name="1" class="radio" id="radio-002" value="002" >
<input type="radio" name="1" class="radio" id="radio-003" value="003" >
<input type="radio" name="2" class="radio" id="radio-004" value="004" >
<input type="radio" name="2" class="radio" id="radio-005" value="005" >
<input type="radio" name="2" class="radio" id="radio-006" value="006" >
<input type="radio" name="3" class="radio" id="radio-007" value="007" >
<input type="radio" name="3" class="radio" id="radio-008" value="008" >
<input type="radio" name="3" class="radio" id="radio-009" value="009" >

1 ответ 1

1

Можно так, пример работает на 3 комбинации ((1,1,1), (1,1,2), (3,3,3)), комбинации можно добавлять

jsFIddle

<input type="radio" name="1" class="radio" id="radio-001" value="001" >
<input type="radio" name="1" class="radio" id="radio-002" value="002" >
<input type="radio" name="1" class="radio" id="radio-003" value="003" >
<input type="radio" name="2" class="radio" id="radio-004" value="004" >
<input type="radio" name="2" class="radio" id="radio-005" value="005" >
<input type="radio" name="2" class="radio" id="radio-006" value="006" >
<input type="radio" name="3" class="radio" id="radio-007" value="007" >
<input type="radio" name="3" class="radio" id="radio-008" value="008" >
<input type="radio" name="3" class="radio" id="radio-009" value="009" >

<img src="" width="400px" id="image" alt="">

<script type="text/javascript">
var images = {
"001004007" : "http://hronika.info/uploads/posts/2016-01/1452736497_yumor12.jpg",
"001004008" : "http://www.nokiaplanet.com/uploads/posts/2015-07/1436517961_cherry-drop-240x320.jpg",
"003006009" : "http://s00.yaplakal.com/pics/pics_original/9/2/3/8037329.jpg"
};

var inp = document.querySelectorAll('input[id^="radio-"]');

for (var i = 0; i < inp.length; i++) {
inp[i].onchange = onChange;
}

function setDefaultImage() {
	document.getElementById('image').src = "http://coe.almau.edu.kz/img/no_image.png";
}

function onChange() {
var inputs = document.querySelectorAll('input[id^="radio-"]:checked');

if (inputs.length == 3) {
    var str = "";
    
    for (var i = 0; i < inputs.length; i++) {
        str += inputs[i].value;
    }
    
    if (images[str] != undefined) {
        document.getElementById('image').src = images[str];
    } else {
    		setDefaultImage();
    }
	} else {
			setDefaultImage();
}
}

setDefaultImage();
</script>

3
  • Огромное спасибо!
    – shadiq
    Commented 24 нояб. 2016 в 15:49
  • Можно еще уточнить один момент, почему не выводится картинка здесь ? jsfiddle.net/x6uqtLab/3
    – shadiq
    Commented 24 нояб. 2016 в 17:00
  • @shadiq потому что не было img#image jsFiddle
    – user199303
    Commented 25 нояб. 2016 в 8:23

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.