Good afternoon, the question arose, there are 3 groups of radio buttons, you need something with different combinations to display a certain picture, for each combination its own. Help advice how to organize it?

<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 answer 1

    It is possible so, the example works on 3 combinations ((1,1,1), (1,1,2), (3,3,3)), combinations can be added

    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> 

    • Thank you so much! - shadiq 3:49
    • You can still clarify one thing, why is not the picture displayed here? jsfiddle.net/x6uqtLab/3 - shadiq
    • @shadiq because there was no img#image jsFiddle - Stanislav Grotto