title: Add Event listener for Click/change on Bootstrap radio buttons
body: <p>I'm making a shop filter and I need to dynamically get the value of the radio button that has been selected and execute a filter function with the value as a parameter.</p>
  
  <p>my HTML is </p>
  
  <pre><code>&lt;div class="btn-group-vertical btn-group-toggle pl-2" data-toggle="buttons"&gt;
      &lt;label class="btn btn-secondary active"&gt;
          &lt;input type="radio" name="option_all" id="option_gender" autocomplete="off" value="All" checked=""&gt; Unisex
      &lt;/label&gt;
      &lt;label class="btn btn-secondary"&gt;
          &lt;input type="radio" name="option_man" id="option_gender" autocomplete="off" value="Male"&gt; Man
      &lt;/label&gt;
      &lt;label class="btn btn-secondary"&gt;
          &lt;input type="radio" name="option_woman" id="option_gender" autocomplete="off" value="Female"&gt; Woman
      &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My idea was something like </p>
  
  <pre><code>$(document).ready(function(){
      $('#option_gender').click(function(){
          filtefFunction(this.value)
      });
  });
  </code></pre>
  
  <p>or an 
  <code>addEventListener('click' func())</code> to  each radio  button ... but i dont know how can i do this. </p>
  
  <p>I prefer of the solution is in vanilla js, because I'm trying to advance my  sills in it :) thank you </p>