Click Images As Radio Buttons

June 14, 2017 5:09 pm by ATS Staff

Following piece of code lets users click on images to serve as radio buttons:

<style>

div.radio_class img { border: solid 1px #bbb; padding: 2px; }
input[type=radio]{ display: none; }
input[type=radio]:checked + img { border: solid 1px #ff0000; }

</style>

<script>

function getRadioValue() {
    var x = document.getElementsByName("name2");
    for (var i = 0; i < x.length; i++) {
        if (x[i].checked == true) {
            alert(x[i].id);
        }
    }
}

</script>

<div class="radio_class">
    <label>
        <input type="radio" name="name2" value="name123" id="nameRED" />
            <img src="http://dummyimage.com/30x30/fc0000/fff&text=+"  class="img-thumbnail" /> 
                
     </label>
</div>

<div class="radio_class">
    <label>
        <input type="radio" name="name2" value="name456" id="nameGREEN" />
            <img src="http://dummyimage.com/30x30/00faaf/fff&text=+"  class="img-thumbnail" /> 
               
     </label>
</div>

<div class="radio_class">
    <label>
        <input type="radio" name="name2" value="name789" id="nameBLUE" />
            <img src="http://dummyimage.com/30x30/0053fa/fff&text=+"  class="img-thumbnail" /> 
                
     </label>
</div>

<input type="button" onclick="getRadioValue()" value="Get" />