<form>
  <div>
    <label><input type="radio" name="sample" value="A" checked>A</label>
		<label><input type="radio" name="sample" value="B">B</label>
	  <label><input type="radio" name="sample" value="C">C</label>
  </div>
</form>
<p class="select_radio">現在、「A」が選択されています。</p>
form{
  display:flex;
  justify-content: center;
  align-items: center;
}

div{
  margin:30px 0;
}

label{
  font-size:24px;
  margin:0 20px;
}

p{
  width:100%;
  text-align:center;
  color:#222;
  font-size:24px;
}
let myradio = document.querySelector("form");

myradio.addEventListener('change', (event) => {
  let radioNodeList = myradio.sample ;
  let a = radioNodeList.value ;
  let mytext = document.querySelector(".select_radio");
  
  mytext.textContent = "現在、「" + a + "」が選択されています。";
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.