對于基本的 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>
