如何检查两组单选按钮是否匹配

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