title: How to make clicking on a radio button equal in behaviour to clicking on its container?
body: <p>I have a bunch of radio-buttons wrapped into div-s, label-s and others. A simplified version would be this:</p>
  <pre><code>&lt;div&gt;
    &lt;label for=&quot;rb__1&quot;&gt;
     &lt;input type=&quot;radio&quot; name=&quot;rb__1&quot; onclick=&quot;onRadioButtonClick(event)&quot; value=&quot;some_val__1&quot; /&gt;
     &lt;span style=&quot;....&quot;&gt;my rb__1&lt;/span&gt;
    &lt;/label&gt;
  &lt;/div&gt;
  
  
  &lt;div&gt;
    &lt;label for=&quot;rb__2&quot;&gt;
     &lt;input type=&quot;radio&quot; name=&quot;rb__2&quot; onclick=&quot;onRadioButtonClick(event)&quot; value=&quot;some_val__2&quot; /&gt;
     &lt;span style=&quot;....&quot;&gt;my rb__2&lt;/span&gt;
    &lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
    &lt;label for=&quot;rb__3&quot;&gt;
     &lt;input type=&quot;radio&quot; name=&quot;rb__3&quot; onclick=&quot;onRadioButtonClick(event)&quot; value=&quot;some_val__3&quot; /&gt;
     &lt;span style=&quot;....&quot;&gt;my rb__3&lt;/span&gt;
    &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Handler:</p>
  <pre><code>   &lt;script&gt;
      function onRadioButtonClick(event) {
         /* handler; it may read 'value' of the current radio-button and other things */  
      }
     &lt;/script&gt;
  </code></pre>
  <p>I want to add <code>onclick</code> handler to each <code>div</code> 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.</p>
  <p>I can't simply add <code>onclick</code>  on a <code>div</code> because there're things that a handler reads from <code>event</code> and that are specific to a radio button.</p>
  <p>And I don't want unneccesary <code>if (clickOnDiv) then... else if (clickOnRadio) then...</code> either.</p>
  <p>How to do it in a proper way?</p>