Проверка radio button JavaScript

994
26 ноября 2016, 09:15

Добрый день, возник вопрос, есть 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" >

Answer 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>

READ ALSO
не работает функция moveBy() Javascript

не работает функция moveBy() Javascript

Вопрос: при запуске функции winMove() окно не двигается по мониторуПочему?

764
Как правильно отрефакторить код?

Как правильно отрефакторить код?

Как правильно отрефакторить следующий код?

673