title: Select the closest radio input
body: <p>I have dom like the following </p>
  
  <pre><code> &lt;input type="radio" name="day_time[]" class="pickup-location-day" value="Sunday"&gt; Sunday
   &lt;input type="radio" name="pickup_time[]" class="pickup-location-time" value="02:00am"&gt; 02:00am
   &lt;input type="radio" name="pickup_time[]" class="pickup-location-time" value="02:30am"&gt; 02:30am
   &lt;input type="radio" name="pickup_time[]" class="pickup-location-time" value="05:30am"&gt; 05:30am&lt;br&gt;
  
    &lt;input type="radio" name="day_time[]" class="pickup-location-day" value="Sunday"&gt; Monday
   &lt;input type="radio" name="pickup_time[]" class="pickup-location-time" value="02:00am"&gt; 02:00am
   &lt;input type="radio" name="pickup_time[]" class="pickup-location-time" value="02:30am"&gt; 02:30am
   &lt;input type="radio" name="pickup_time[]" class="pickup-location-time" value="05:30am"&gt; 05:30am&lt;br&gt;
  
   etc .... 
  </code></pre>
  
  <p>i want to bind when select <code>.pickup-location-time</code> with the first <code>.pickup-location-day</code>, like when the user select the <code>.pickup-location-time</code> closest '.pickup-location-day' should selected also .</p>
  
  <p>note that i used the following </p>
  
  <pre><code>$('.pickup-location-time').on('change', function() {
     $(this).closest('.pickup-location-time').prop('checked', true);
  })
  </code></pre>
  
  <p>but this couldn't help </p>
  
  <p><img src="https://i.stack.imgur.com/vy4Ld.png" alt="enter image description here"></p>