我有两个字段,其中有两个选项可供选择,两个复选框。我希望当我点击Yes选项时,它会自动在另一个复选框中选择Yes。
例如:我点击这里的Yes
:Guarantee or other security given by custom Single
自动选择这里的Yes
:Guarantee or other security given by customer
:
<div class="row gutters">
<div class="col col-2">
<label data-timtranslationlabel="MXGuranteeOrOther" for="guranteereqeust_single">Guarantee or other security given by custome Single</label>
</div>
<div class="col col-1">
<div class="form-item form-checkboxes">
<input type="radio" id="DeliveryYesSingle" name="deliveryCredit" value="yes"/>
<label data-timtranslationlabel="Hyes" for="deliveryCredit_Yes" class="checkbox">Yes</label>
</div>
</div>
<div class="col col-1">
<div class="form-item form-checkboxes">
<input type="radio" id="DeliveryNoSingle" name="deliveryCredit" value="no"/>
<label data-timtranslationlabel="Hno" for="deliveryCredit_No" class="checkbox">No</label>
</div>
</div>
</div>
<div class="row gutters">
<div class="col col-2">
<label data-timtranslationlabel="MXGuranteeOrOther" for="guranteereqeust_singleBoard">Guarantee or other security given by customer</label>
</div>
<div class="col col-1">
<div class="form-item form-checkboxes">
<input type="radio" id="deliveryYesSingleBoard" name="deliverySingle" value="yes"/>
<label data-timtranslationlabel="Hyes" for="deliveryYesSingleBoard" class="checkbox">Yes</label>
</div>
</div>
<div class="col col-1">
<div class="form-item form-checkboxes">
<input type="radio" id="DeliveryNoSingleBoard" name="deliverySingle" value="no"/>
<label data-timtranslationlabel="Hno" for="DeliveryNoSingleBoard" class="checkbox">No</label>
</div>
</div>
</div>
jQuery
$('[id="DeliveryYesSingle"]').on('change', () => {
$('[id="deliveryYesSingleBoard"]').prop('checked', true);
});
$('[id="DeliveryNoSingle"]').on('change', () => {
$('[id="DeliveryNoSingleBoard"]').prop('checked', true);
});
JSfiddle: https://jsfiddle.net/Palucci92/pouw6q3t/1/
确保导入了jQuery。我刚刚在Jsfiddle中添加了jQuery标签它运行正常
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
我也刚刚添加了一些脚本到过程中,反之亦然
我刚刚附加编辑过的JSfiddle: https://jsfiddle.net/p5thmwab/
正在运行
可能的问题是你没有包括Jquery库在你的提琴
试试我做的代码片段。
$('[id="DeliveryYesSingle"]').on('change', () => {
$('[id="deliveryYesSingleBoard"]').prop('checked', true);
});
$('[id="DeliveryNoSingle"]').on('change', () => {
$('[id="DeliveryNoSingleBoard"]').prop('checked', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
<div class="row gutters">
<div class="col col-2"><label data-timtranslationlabel="MXGuranteeOrOther" for="guranteereqeust_single">Guarantee or other security given by custome Single</label></div>
<div class="col col-1">
<div class="form-item form-checkboxes">
<input type="radio" id="DeliveryYesSingle" name="deliveryCredit" value="yes"/><label data-timtranslationlabel="Hyes" for="deliveryCredit_Yes" class="checkbox">Yes</label>
</div>
</div>
<div class="col col-1">
<div class="form-item form-checkboxes">
<input type="radio" id="DeliveryNoSingle" name="deliveryCredit" value="no"/><label data-timtranslationlabel="Hno" for="deliveryCredit_No" class="checkbox">No</label>
</div>
</div>
</div>
<div class="row gutters">
<div class="col col-2">
<label data-timtranslationlabel="MXGuranteeOrOther" for="guranteereqeust_singleBoard">Guarantee or other security given by customer</label></div>
<div class="col col-1">
<div class="form-item form-checkboxes">
<input type="radio" id="deliveryYesSingleBoard" name="deliverySingle" value="yes"/>
<label data-timtranslationlabel="Hyes" for="deliveryYesSingleBoard" class="checkbox">Yes</label>
</div>
</div>
<div class="col col-1">
<div class="form-item form-checkboxes">
<input type="radio" id="DeliveryNoSingleBoard" name="deliverySingle" value="no"/>
<label data-timtranslationlabel="Hno" for="DeliveryNoSingleBoard"
class="checkbox">No</label>
</div>
</div>
</div>
</div>