Radio Options

by michaelschmid

HTML

<h1>Get changed value of a Radio Group</h1>

<ul>
    <li>Mouse and Keyboard</li>
</ul>
  
<div id="myoptiongroup">
    <label><input type="radio" name="myoptions" checked="checked"  value="gaga" /> gaga </label>
    <label><input type="radio" name="myoptions"  value="gugu" /> gugu </label>
</div>

<h4><span>Current Value: </span></h4>
<span id="current"></span>
<h4><span>Changed to Value: </span></h4>
<span id="result"></span>

JavaScript

// current value
// console.log(document.getElementById('myoptiongroup').querySelectorAll('#myoptiongroup input'));

document.getElementById('myoptiongroup').querySelectorAll('#myoptiongroup input')
	.forEach(element => {
  	
  	if(element.checked) {
    	// console.log(element.value)
    	document.getElementById('current').textContent = element.value;
    	}
    }
    );

// change event
document.getElementById('myoptiongroup').addEventListener('change', function(e) {
	document.getElementById('result').textContent = e.target.value;
});