I've created two radio buttons. The radio buttons have a background image. One checked and one unchecked image. I use CSS to change the images back and forth.
Both the radio buttons have values. I'm trying to get the values for each radio button when checked. Can I do this without JavaScript? If not, how can I get the value of the radio button when it's checked?
var yesImg = document.getElementById('radio_one');
var noImg = document.getElementById('radio_two');
if (yesImg.src.match('http://icons.iconarchive.com/icons/icojam/blueberry-basic/32/radio-button-on-icon.png')) {
console.log(document.getElementById('find_val').value);
}
else if (noImg.src.match('http://icons.iconarchive.com/icons/icojam/blueberry-basic/32/radio-button-on-icon.png')) {
console.log(document.getElementById('find_val').value);
}input[type="radio"] {
display: none;
}
input[type="radio"]+label {
background-image: url('http://icons.iconarchive.com/icons/icojam/blueberry-basic/32/radio-button-off-icon.png');
background-repeat: no-repeat;
display: inline-block;
cursor: pointer;
padding-bottom: 15px;
}
input[type="radio"]:checked+label {
background-image: url('http://icons.iconarchive.com/icons/icojam/blueberry-basic/32/radio-button-on-icon.png');
}
.lbl-style{
padding-left:30px;
padding-top:8px;
}<span >
<input type="radio" id="radio_one" value="1" name="number" class="rdo-style"/>
<label for="radio_one" class="lbl-style" >Value 1</label>
</span>
<span >
<input type="radio" id="radio_two" value="2" name="number" class="rdo-style"/>
<label for="radio_two" class="lbl-style" >Value 2</label>
</span>
<input type="hidden" id="find_val" name="number" />