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

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){&nbsp; if(data.checked){&nbsp; &nbsp; var radios = document.getElementsByName('car-rental-pickup-location');&nbsp; &nbsp; for (var i = 0, length = radios.length; i < length; i++){&nbsp; &nbsp; &nbsp;if (radios[i].checked){&nbsp; &nbsp; &nbsp; // do whatever you want with the checked radio&nbsp; &nbsp; &nbsp; document.getElementsByName('car-rental-dropoff-location')[i].checked = true;&nbsp; &nbsp; &nbsp; // only one radio can be logically checked, don't check the rest&nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; }&nbsp; }}然后您将编辑您的复选框输入以使用以下代码创建一个 onclick 方法。<input type="checkbox" onclick="setDropOff(this)"name="same" value="Same"> Click for same city drop off/pick up<br>这将允许单选按钮在您的问题中所述的复选框被单击时进行匹配。但是，在单击后进行更改时，这不会更新单选按钮。为此，您需要将复选框从您在单选框 onfocus 方法中调用的函数发送到函数中。. 要做到这一点，您需要再次调用该方法，只要在您拥有的方法内部选中该复选框，重点放在单选按钮上。把它们放在一起：function setDropOff(data){&nbsp; if(data.checked){&nbsp; &nbsp; var radios = document.getElementsByName('car-rental-pickup-location');&nbsp; &nbsp; for (var i = 0, length = radios.length; i < length; i++){&nbsp; &nbsp; &nbsp;if (radios[i].checked){&nbsp; &nbsp; &nbsp; // do whatever you want with the checked radio&nbsp; &nbsp; &nbsp; document.getElementsByName('car-rental-dropoff-location')[i].checked = true;&nbsp; &nbsp; &nbsp; // only one radio can be logically checked, don't check the rest&nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; }&nbsp; }}function laCheck(){}function sfCheck(){}&nbsp; &nbsp;<div class="col-12"><div class="col-md-12 form-group">&nbsp; &nbsp; <label for="car-rental-pickup-location" class="mb-2">Pickup Location<small class="text-danger">*</small></label><br>&nbsp; &nbsp; <div class="btn-group my-tab btn-group-toggle nav" data-toggle="buttons">&nbsp; &nbsp; &nbsp; &nbsp; <a href="#tab-pickup" class=" btn btn-outline-secondary flex-fill pudo" data-toggle="tab">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="car-rental-pickup-location" id="car-rental-pickup-location-la" class="required" value="la" required onfocus="laCheck();">Los Angeles&nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#tab-pickup" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="car-rental-pickup-location" id="car-rental-pickup-location-sf" class="required" value="sf" onfocus="sfCheck();">San Francisco&nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#tab-pickup" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="car-rental-pickup-location" id="car-rental-pickup-location-oc" class="required" value="oc" onfocus="laCheck();">Orange County&nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; </div></div><div class="col-md-12 form-group">&nbsp; &nbsp; <label for="car-rental-dropoff-location" class="mb-3">Drop-Off Location<small class="text-danger">*</small></label><br>&nbsp; &nbsp; <div class="btn-group my-tab btn-group-toggle nav" data-toggle="buttons">&nbsp; &nbsp; &nbsp; &nbsp; <a href="#tab-dropoff" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="car-rental-dropoff-location" id="car-rental-dropoff-location-la" value="la" required onfocus="getpricing();">Los Angeles&nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#tab-dropoff" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="car-rental-dropoff-location" id="car-rental-dropoff-location-sf" value="sf" onfocus="getpricing();">San Francisco&nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#tab-dropoff" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="car-rental-dropoff-location" id="car-rental-dropoff-location-oc" value="oc" onfocus="getpricing();">Orange County&nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; </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 () {&nbsp; let pickupLocation = 'input[type=radio][name=car-rental-pickup-location]';&nbsp; let dropoffLocation = 'input[type=radio][name=car-rental-dropoff-location]';&nbsp; let sameCity = 'input[type=checkbox][name=same]';&nbsp; function setDropOff(){&nbsp; &nbsp; &nbsp; if($(sameCity).is(':checked')) {&nbsp; &nbsp; &nbsp; &nbsp; let selectedPickupValue = $(pickupLocation + ':checked').val();&nbsp; &nbsp; &nbsp; &nbsp; if(selectedPickupValue){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(dropoffLocation + '[value="'+selectedPickupValue +'"]').prop('checked', true);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; $(dropoffLocation).prop('disabled', true);&nbsp; &nbsp; &nbsp;} else {&nbsp; &nbsp; &nbsp; &nbsp; $(dropoffLocation).prop('disabled', false);&nbsp; &nbsp; &nbsp;}&nbsp; };&nbsp;$(pickupLocation).on('change',setDropOff);&nbsp;$(sameCity).on('click',setDropOff);});