如何檢查兩組單選按鈕是否匹配

Question

我有一個預訂計算器，當選中一個選項時，我要確保下車地點和上車地點相同。

這是我的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> 

使用JavaScript，如果選中此復選框，我想強制將car-rental-dropoff-location等於car-rental-pickup-location ，我該怎么做？

Answer 1

對於基本的Javascript，您需要一個類似這樣的函數

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;
     }
    }
  }
}

那么您將編輯您的復選框輸入，以使用以下代碼創建一個onclick方法。

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

如您的問題所述，單擊復選框時，單選按鈕將匹配。

單擊后進行更改時，這不會更新單選按鈕。 為此，您需要將復選框從單選框onfocus方法中調用的函數發送到函數中。

。 為此，只要選中您要重點放在單選按鈕上的方法內部的復選框，您就需要再次調用該方法。

全部放在一起：

 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

首先：添加一個<form id="my-Form" action=".... ?"> ，其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> 

你為什么要使事情復雜化？

Answer 3

使用此jQuery代碼

$(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);
});