I am working on html file. I have two two labels(say L1 and L2). Each label has two radio buttons. I want to hide L2 and it's radio buttons if a user selects any radio button from L1.
I know this can be done using java script but how to capture the selection of radio buttons on which i can execute my java script.
I have prepared a version based on your question. Is this what you meant?
[HTML]
<div id="container" class="container">
<div id="first-radio">
<label for="L1">L1</label>
<div class="radio-box">
<input type="radio" name="L1" /> L1-first
</div>
<div style="margin-bottom: 15px" class="radio-box">
<input type="radio" name="L1" /> L1-second
</div>
</div>
<div id="second-radio">
<label for="L2">L2</label>
<div class="radio-box">
<input type="radio" name="L2" /> L2-first
</div>
<div class="radio-box">
<input type="radio" name="L2" /> L2-second
</div>
</div>
[Javascript]
const container = document.getElementById("container");
const firstRadio = document.getElementById("first-radio");
const secondRadio = document.getElementById("second-radio");
const L1_Radio1 = container.children[0].children[1];
const L1_Radio2 = container.children[0].children[2];
const L2_Radio1 = container.children[1].children[1];
const L2_Radio2 = container.children[1].children[2];
const array1 = [L1_Radio1, L1_Radio2];
const array2 = [L2_Radio1, L2_Radio2];
function hideRadio() {
array1.forEach(item => {
item.addEventListener("change", () => {
secondRadio.style.visibility = "hidden";
});
});
array2.forEach(item => {
item.addEventListener("change", () => {
firstRadio.style.visibility = "hidden";
});
});
}
hideRadio();
You can watch it in action here: https://jsfiddle.net/s4onh9qk/6/