How to check if two sets of radio buttons match

Question

I have a reservation calculator, when an options is checked I want to ensure that the drop off location and the pick up location are one in the same.

Here is my HTML

 <div class="col-12"> <div class="col-md-12 form-group"> <label for="car-rental-pickup-location" class="mb-2">Pickup Location<small class="text-danger">*</small></label><br> <div class="btn-group my-tab btn-group-toggle nav" data-toggle="buttons"> <a href="#tab-pickup" class=" btn btn-outline-secondary flex-fill pudo" data-toggle="tab"> <input type="radio" name="car-rental-pickup-location" id="car-rental-pickup-location-la" class="required" value="la" required onfocus="laCheck();">Los Angeles </a> <a href="#tab-pickup" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab"> <input type="radio" name="car-rental-pickup-location" id="car-rental-pickup-location-sf" class="required" value="sf" onfocus="sfCheck();">San Francisco </a> <a href="#tab-pickup" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab"> <input type="radio" name="car-rental-pickup-location" id="car-rental-pickup-location-oc" class="required" value="oc" onfocus="laCheck();">Orange County </a> </div> </div> <div class="col-md-12 form-group"> <label for="car-rental-dropoff-location" class="mb-3">Drop-Off Location<small class="text-danger">*</small></label><br> <div class="btn-group my-tab btn-group-toggle nav" data-toggle="buttons"> <a href="#tab-dropoff" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab"> <input type="radio" name="car-rental-dropoff-location" id="car-rental-dropoff-location-la" value="la" required onfocus="getpricing();">Los Angeles </a> <a href="#tab-dropoff" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab"> <input type="radio" name="car-rental-dropoff-location" id="car-rental-dropoff-location-sf" value="sf" onfocus="getpricing();">San Francisco </a> <a href="#tab-dropoff" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab"> <input type="radio" name="car-rental-dropoff-location" id="car-rental-dropoff-location-oc" value="oc" onfocus="getpricing();">Orange County </a> </div> </div> <input type="checkbox" name="same" value="Same"> Click for same city drop off/pick up<br> 

Using JavaScript, I want to force the car-rental-dropoff-location to equal the car-rental-pickup-location if the check box is checked, how would I do that?

Answer 1

For basic Javascript, you would need a function like so

function setDropOff(data){
  if(data.checked){
    var radios = document.getElementsByName('car-rental-pickup-location');

    for (var i = 0, length = radios.length; i < length; i++){
     if (radios[i].checked){
      // do whatever you want with the checked radio
      document.getElementsByName('car-rental-dropoff-location')[i].checked = true;
      // only one radio can be logically checked, don't check the rest
      break;
     }
    }
  }
}

then you would edit you checkbox input to have an onclick method with the following code.

<input type="checkbox" onclick="setDropOff(this)"name="same" value="Same"> Click for same city drop off/pick up<br>

This will allow the radio buttons to match when the checkbox is clicked as stated in your question.

This will not update the radio buttons when a change is made after the click though. To do that, you would need to send the checkbox into the function from the functions you are calling in the radio box onfocus methods.

. To do that, you would need to call the method again as long as the checkbox is checked with inside the methods you have for on focus on the radio buttons.

putting it all together:

 function setDropOff(data){ if(data.checked){ var radios = document.getElementsByName('car-rental-pickup-location'); for (var i = 0, length = radios.length; i < length; i++){ if (radios[i].checked){ // do whatever you want with the checked radio document.getElementsByName('car-rental-dropoff-location')[i].checked = true; // only one radio can be logically checked, don't check the rest break; } } } } function laCheck(){ } function sfCheck(){ } 

  <div class="col-12"> <div class="col-md-12 form-group"> <label for="car-rental-pickup-location" class="mb-2">Pickup Location<small class="text-danger">*</small></label><br> <div class="btn-group my-tab btn-group-toggle nav" data-toggle="buttons"> <a href="#tab-pickup" class=" btn btn-outline-secondary flex-fill pudo" data-toggle="tab"> <input type="radio" name="car-rental-pickup-location" id="car-rental-pickup-location-la" class="required" value="la" required onfocus="laCheck();">Los Angeles </a> <a href="#tab-pickup" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab"> <input type="radio" name="car-rental-pickup-location" id="car-rental-pickup-location-sf" class="required" value="sf" onfocus="sfCheck();">San Francisco </a> <a href="#tab-pickup" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab"> <input type="radio" name="car-rental-pickup-location" id="car-rental-pickup-location-oc" class="required" value="oc" onfocus="laCheck();">Orange County </a> </div> </div> <div class="col-md-12 form-group"> <label for="car-rental-dropoff-location" class="mb-3">Drop-Off Location<small class="text-danger">*</small></label><br> <div class="btn-group my-tab btn-group-toggle nav" data-toggle="buttons"> <a href="#tab-dropoff" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab"> <input type="radio" name="car-rental-dropoff-location" id="car-rental-dropoff-location-la" value="la" required onfocus="getpricing();">Los Angeles </a> <a href="#tab-dropoff" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab"> <input type="radio" name="car-rental-dropoff-location" id="car-rental-dropoff-location-sf" value="sf" onfocus="getpricing();">San Francisco </a> <a href="#tab-dropoff" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab"> <input type="radio" name="car-rental-dropoff-location" id="car-rental-dropoff-location-oc" value="oc" onfocus="getpricing();">Orange County </a> </div> </div> <input type="checkbox" onclick="setDropOff(this)"name="same" value="Same"> Click for same city drop off/pick up<br> 

Answer 2

First : add a FORM, with id : <form id="my-Form" action=".... ?">

 const MyForm = document.getElementById('my-Form') , cBx_Pickup = 'car-rental-pickup-location' , cBx_Dropoff = 'car-rental-dropoff-location' MyForm.onchange = e => { switch (e.target.name) { case 'same': if (MyForm.same.checked) { MyForm[cBx_Dropoff].value = MyForm[cBx_Pickup].value } break; case cBx_Pickup: if (MyForm.same.checked) { MyForm[cBx_Dropoff].value = MyForm[cBx_Pickup].value } break; case cBx_Dropoff: if (MyForm.same.checked) { MyForm[cBx_Pickup].value = MyForm[cBx_Dropoff].value } break; } } 

 <form id="my-Form"> <div class="col-12"> <div class="col-md-12 form-group"> <label for="car-rental-pickup-location" class="mb-2">Pickup Location<small class="text-danger">*</small></label><br> <div class="btn-group my-tab btn-group-toggle nav" data-toggle="buttons"> <a href="#tab-pickup" class=" btn btn-outline-secondary flex-fill pudo" data-toggle="tab"> <input type="radio" name="car-rental-pickup-location" id="car-rental-pickup-location-la" class="required" value="la" required onfocus="laCheck();">Los Angeles </a> <a href="#tab-pickup" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab"> <input type="radio" name="car-rental-pickup-location" id="car-rental-pickup-location-sf" class="required" value="sf" onfocus="sfCheck();">San Francisco </a> <a href="#tab-pickup" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab"> <input type="radio" name="car-rental-pickup-location" id="car-rental-pickup-location-oc" class="required" value="oc" onfocus="laCheck();">Orange County </a> </div> </div> <div class="col-md-12 form-group"> <label for="car-rental-dropoff-location" class="mb-3">Drop-Off Location<small class="text-danger">*</small></label><br> <div class="btn-group my-tab btn-group-toggle nav" data-toggle="buttons"> <a href="#tab-dropoff" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab"> <input type="radio" name="car-rental-dropoff-location" id="car-rental-dropoff-location-la" value="la" required onfocus="getpricing();">Los Angeles </a> <a href="#tab-dropoff" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab"> <input type="radio" name="car-rental-dropoff-location" id="car-rental-dropoff-location-sf" value="sf" onfocus="getpricing();">San Francisco </a> <a href="#tab-dropoff" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab"> <input type="radio" name="car-rental-dropoff-location" id="car-rental-dropoff-location-oc" value="oc" onfocus="getpricing();">Orange County </a> </div> </div> </div> <input type="checkbox" name="same" value="Same"> Click for same city drop off/pick up<br> </form> 

why do you want to complicate things?

Answer 3

Use this jQuery Code

$(document).ready(function () {
  let pickupLocation = 'input[type=radio][name=car-rental-pickup-location]';
  let dropoffLocation = 'input[type=radio][name=car-rental-dropoff-location]';
  let sameCity = 'input[type=checkbox][name=same]';
  function setDropOff(){
      if($(sameCity).is(':checked')) {
        let selectedPickupValue = $(pickupLocation + ':checked').val();
        if(selectedPickupValue){
          $(dropoffLocation + '[value="'+selectedPickupValue +'"]').prop('checked', true);
        }
        $(dropoffLocation).prop('disabled', true);
     } else {
        $(dropoffLocation).prop('disabled', false);
     }
  };

 $(pickupLocation).on('change',setDropOff);
 $(sameCity).on('click',setDropOff);
});