选中单选按钮时,datetimepicker 不显示并且选中 false 不起作用
When Radio button checked, datetime picker does not show and checked false doesnt work
我有两个单选按钮,立即交货和交货时间。默认选中“立即交付”。如果客户在单击“交货时间”按钮时希望稍后交货,则必须显示日期选择器并且必须取消选中“立即交货”单选按钮。但这些不会发生。日期选择器未显示,“立即交货”收音机未变为未选中状态。我的代码有什么问题?任何人都可以帮忙。谢谢
下面是我的观点;
<div class="checkout-nameoncake-itemcontainer">
<div class="checkout-nameoncake-name">
<label class="label-checkout-deliverytime">Deliver Now(~ 45dk.)</label><input type="radio" id="DeliveryNowRadio" checked="checked" name="DeliveryNow" value=" " />
<label class="label-checkout-deliverytime">Delivert at </label><input type="radio" id="DeliveryLaterRadio" name="RequestedDeliveryDate" value=" " />
</div>
<div class="checkout-nameoncake-details">
<input type="date" name="name" class="datepicker" id="datepicker" style="margin: 17% 0 0 5%;border-radius: 7%;border: solid;border-width: thin;border-color: lightblue;display:none" value="" />
</div>
</div>
下面你可以看到我的jquery。
<script>
$(document).ready(function () {
$("#DeliveryLaterRadio").click(function () {
$("#DeliveryNowRadio").prop("checked", false);
$(".datepicker").css("display", "inline-block");
});
$("#DeliveryNowRadio").click(function () {
$("#DeliveryLaterRadio").prop("checked", false);
$(".datepicker").css("display", "none");
});
});
</script>
我在 plunker 上试过你的代码,它有效:
https://plnkr.co/OJVF85JgJiZSghMtyUtf
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div class="checkout-nameoncake-itemcontainer">
<div class="checkout-nameoncake-name">
<label class="label-checkout-deliverytime">Deliver Now(~ 45dk.)</label>
<input type="radio" id="DeliveryNowRadio" checked="checked" name="DeliveryNow" value=" " />
<label class="label-checkout-deliverytime">Delivert at </label>
<input type="radio" id="DeliveryLaterRadio" name="RequestedDeliveryDate" value=" " />
</div>
<div class="checkout-nameoncake-details">
<input type="date" name="name" class="datepicker" id="datepicker" style="margin: 17% 0 0 5%;border-radius: 7%;border: solid;border-width: thin;border-color: lightblue;display:none" value="" />
</div>
</div>
<script>
$(document).ready(function () {
$("#DeliveryLaterRadio").click(function () {
$("#DeliveryNowRadio").prop("checked", false);
$(".datepicker").css("display", "inline-block");
});
$("#DeliveryNowRadio").click(function () {
$("#DeliveryLaterRadio").prop("checked", false);
$(".datepicker").css("display", "none");
});
});
</script>
</body>
</html>
我有两个单选按钮,立即交货和交货时间。默认选中“立即交付”。如果客户在单击“交货时间”按钮时希望稍后交货,则必须显示日期选择器并且必须取消选中“立即交货”单选按钮。但这些不会发生。日期选择器未显示,“立即交货”收音机未变为未选中状态。我的代码有什么问题?任何人都可以帮忙。谢谢
下面是我的观点;
<div class="checkout-nameoncake-itemcontainer">
<div class="checkout-nameoncake-name">
<label class="label-checkout-deliverytime">Deliver Now(~ 45dk.)</label><input type="radio" id="DeliveryNowRadio" checked="checked" name="DeliveryNow" value=" " />
<label class="label-checkout-deliverytime">Delivert at </label><input type="radio" id="DeliveryLaterRadio" name="RequestedDeliveryDate" value=" " />
</div>
<div class="checkout-nameoncake-details">
<input type="date" name="name" class="datepicker" id="datepicker" style="margin: 17% 0 0 5%;border-radius: 7%;border: solid;border-width: thin;border-color: lightblue;display:none" value="" />
</div>
</div>
下面你可以看到我的jquery。
<script>
$(document).ready(function () {
$("#DeliveryLaterRadio").click(function () {
$("#DeliveryNowRadio").prop("checked", false);
$(".datepicker").css("display", "inline-block");
});
$("#DeliveryNowRadio").click(function () {
$("#DeliveryLaterRadio").prop("checked", false);
$(".datepicker").css("display", "none");
});
});
</script>
我在 plunker 上试过你的代码,它有效:
https://plnkr.co/OJVF85JgJiZSghMtyUtf
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div class="checkout-nameoncake-itemcontainer">
<div class="checkout-nameoncake-name">
<label class="label-checkout-deliverytime">Deliver Now(~ 45dk.)</label>
<input type="radio" id="DeliveryNowRadio" checked="checked" name="DeliveryNow" value=" " />
<label class="label-checkout-deliverytime">Delivert at </label>
<input type="radio" id="DeliveryLaterRadio" name="RequestedDeliveryDate" value=" " />
</div>
<div class="checkout-nameoncake-details">
<input type="date" name="name" class="datepicker" id="datepicker" style="margin: 17% 0 0 5%;border-radius: 7%;border: solid;border-width: thin;border-color: lightblue;display:none" value="" />
</div>
</div>
<script>
$(document).ready(function () {
$("#DeliveryLaterRadio").click(function () {
$("#DeliveryNowRadio").prop("checked", false);
$(".datepicker").css("display", "inline-block");
});
$("#DeliveryNowRadio").click(function () {
$("#DeliveryLaterRadio").prop("checked", false);
$(".datepicker").css("display", "none");
});
});
</script>
</body>
</html>