Here is the JavaScript code I created:
let radioChange = document.getElementsByName("pain-location");
let headPain = document.getElementById("headPain");
let shoulderPain = document.getElementById("shoulderPain");
let backPain = document.getElementById("backPain");
let listInner = document.getElementsByClassName("list-inner");
radioChange[0].addEventListener('click', (e) => {
if(document.getElementById('painOption1').checked) {
for (let i=0;i<listInner.length;i+=1){
listInner[i].style.display = 'none';
}
headPain.style.display = "block";
} else if(document.getElementById('painOption2').checked) {
for (let i=0;i<listInner.length;i+=1){
listInner[i].style.display = 'none';
}
shoulderPain.style.display = "block";
} else if(document.getElementById('painOption3').checked) {
for (let i=0;i<listInner.length;i+=1){
listInner[i].style.display = 'none';
}
backPain.style.display = "block";
}
});
And here is the corresponding HTML:
<div class="btn-group man-points">
<div class="ptn-check-point" id="optionBtn1">
<input type="radio" class="btn-check" name="pain-location" id="painOption1" required>
<label class="btn btn-secondary" for="painOption1"></label>
</div>
<div class="ptn-check-point" id="optionBtn2">
<input type="radio" class="btn-check" name="pain-location" id="painOption2" checked required>
<label class="btn btn-secondary" for="painOption2"></label>
</div>
<div class="ptn-check-point" id="optionBtn3">
<input type="radio" class="btn-check" name="pain-location" id="painOption3" required>
<label class="btn btn-secondary" for="painOption3"></label>
</div>
</div>
<div class="list-inner" id="headPain">
<h5>Head</h5>
</div>
<div class="list-inner" id="shoulderPain">
<h5>Shoulder</h5>
</div>
<div class="list-inner" id="backPain">
<h5>Shoulder</h5>
</div>
I implemented this using Bootstrap 5. The JS code changes elements to be displayed based on a radio button selection.