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

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>    使用 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

使用这个 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);

});