How to make clicking on a radio button equal in behaviour to clicking on its container?

Question

I have a bunch of radio-buttons wrapped into div-s, label-s and others. A simplified version would be this:

<div>
  <label for="rb__1">
   <input type="radio" name="rb__1" onclick="onRadioButtonClick(event)" value="some_val__1" />
   <span style="....">my rb__1</span>
  </label>
</div>


<div>
  <label for="rb__2">
   <input type="radio" name="rb__2" onclick="onRadioButtonClick(event)" value="some_val__2" />
   <span style="....">my rb__2</span>
  </label>
</div>

<div>
  <label for="rb__3">
   <input type="radio" name="rb__3" onclick="onRadioButtonClick(event)" value="some_val__3" />
   <span style="....">my rb__3</span>
  </label>
</div>

Handler:

   <script>
    function onRadioButtonClick(event) {
       /* handler; it may read 'value' of the current radio-button and other things */  
    }
   </script>

I want to add onclick handler to each div as well such that clicking on it would result to the same behaviour: an appropriate radio button would become selected and handled the same way as if a click occured on a radio button itself. And all of this with a smallest amount of copy-paste possible.

I can't simply add onclick on a div because there're things that a handler reads from event and that are specific to a radio button.

And I don't want unneccesary if (clickOnDiv) then... else if (clickOnRadio) then... either.

How to do it in a proper way?

Answer 1

You use id and for attributes. id attribute gives your input type an id and for attribute on label finds any input matching the same name. If their name match, you get the desired result.

Also in a group all radio buttons should have the same value for name attribute otherwise, you will be able to select multiple items.

I am not adding the toggle functionality to the radio button but you can do that using JavaScript.

 <input type="radio" id="radio-button" name="radio"> <label for="radio-button" class="radio-btn-1">Radio Button</label> <input type="radio" id="radio-button-2" name="radio"> <label for="radio-button-2" class="radio-btn-2">Radio Button 2</label>

Answer 2

Instead of using div tag as top level, i would suggest you to use label element.

Value of for property of label and id property of input tag must be same. So when user clicks on label, corresponding radio element will be selected/unselected and an onchange event will be fired.

 function onRadioButtonClick(e){ console.log(e.target.value); }

 <label for="rb__1"> <input id="rb__1" type="radio" name="rb__1" onchange="onRadioButtonClick(event)" value="some_val__1" /> <span style="....">my rb__1</span> </label> <label for="rb__2"> <input id="rb__2" type="radio" name="rb__2" onchange="onRadioButtonClick(event)" value="some_val__2" /> <span style="....">my rb__1</span> </label>

Answer 3

To use the div elements as listeners for a click event, you will have to have conditionals to check the event being fired, being three potential elements other than the input => LABEL , SPAN or DIV .

Each of these will have to be handled differently using the event especially if you want separate things that will be relative to the element the event actually is . The div and label we can simply query the input selector as it will be a child, whereas the span we have to target the parent and then get its first child , so the conditional will be different than the proceeding two.

 const parent = document.querySelectorAll('.parent') function selectInput(e) { $this = e.target; let input = $this.querySelector('input[type="radio"]') $this.tagName === "DIV" ? input.checked === true ? input.checked = false : input.checked = true : null; $this.tagName === "LABEL" ? input.checked === true ? input.checked = false : input.checked = true : null; $this.tagName === "SPAN" ? $this.parentNode.children[0].checked === true ? $this.parentNode.children[0].checked = false : $this.parentNode.children[0].checked = true : null; console.log($this.tagName) } parent.forEach(div => div.addEventListener('click', selectInput))

 <div class="parent"> <label for="rb__1"> <input type="radio" name="rb__1" value="some_val__1" /> <span style="....">my rb__1</span> </label> </div> <div class="parent"> <label for="rb__2"> <input type="radio" name="rb__2" value="some_val__2" /> <span style="....">my rb__2</span> </label> </div> <div class="parent"> <label for="rb__3"> <input type="radio" name="rb__3" value="some_val__3" /> <span style="....">my rb__3</span> </label> </div>