我有一個 HTML 表單，它有 2 組單選按鈕。我需要第一組也改變第二組的選擇，即
第 1 組有選項 A 和 B，第 2 組有選項 C 和 D；當我選擇 A 時，我需要表單也選擇 C；當我選擇 B 時，我需要表單也選擇 D。我需要在頁面加載時默認選擇 A 和 C。A & C 永遠是配對的；B&D 將永遠配對。
我知道這聽起來不切實際，但原因是此表單將其回應發送到我無法編輯欄位的另一個提供商的表單。他們在他們的形式中有效地得到了一個重復的問題（相同的問題只是措辭略有不同），我不希望我的用戶必須兩次回答相同的問題，所以我希望從視圖中隱藏 C&D 的按鈕.
每個組上的“名稱”不同，每個單選按鈕的“值”和“id”都是唯一的。
這能做到嗎？歡迎使用 JQuery 和 JS 解決方案。
<label for="buyer-select">
<div class="user-select-label">Buyer</div>
</label>
<input type="radio" name="answers[1234][answers]" id="buyer-select" class="buyer-select" value="buyer" checked>
<label for="agent-select">
<div class="user-select-label">Agent</div>
</label>
<input type="radio" name="answers[1234][answers]" id="agent-select" class="agent-select" value="broker">
<label class="label-text" for="buyer">Buyer</label>
<input type="radio" name="agent" id="buyer" value="false">
<label class="label-text" for="agent">Agent</label>
<input type="radio" name="agent" id="agent" value="true">
uj5u.com熱心網友回復：
只需設定checked相應按鈕的屬性即可。
document.getElementById("buyer").checked = true;
document.getElementById("buyer-select").addEventListener("click", function() {
document.getElementById("buyer").checked = true;
});
document.getElementById("agent-select").addEventListener("click", function() {
document.getElementById("agent").checked = true;
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="buyer-select">
<div class="user-select-label">Buyer</div>
</label>
<input type="radio" name="answers[1234][answers]" id="buyer-select" class="buyer-select" value="buyer" checked>
<label for="agent-select">
<div class="user-select-label">Agent</div>
</label>
<input type="radio" name="answers[1234][answers]" id="agent-select" class="agent-select" value="broker">
<br>
<label class="label-text" for="buyer">Buyer</label>
<input type="radio" name="agent" id="buyer" value="false">
<label class="label-text" for="agent">Agent</label>
<input type="radio" name="agent" id="agent" value="true">您還可以使用單個隱藏輸入替換第二組單選按鈕。將單選按鈕發送的值放入隱藏輸入的值中。
document.getElementById("buyer-select").addEventListener("click", function() {
document.getElementById("buyer-agent").value = "false";
});
document.getElementById("agent-select").addEventListener("click", function() {
document.getElementById("buyer-agent").value = "true";
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="buyer-select">
<div class="user-select-label">Buyer</div>
</label>
<input type="radio" name="answers[1234][answers]" id="buyer-select" class="buyer-select" value="buyer" checked>
<label for="agent-select">
<div class="user-select-label">Agent</div>
</label>
<input type="radio" name="answers[1234][answers]" id="agent-select" class="agent-select" value="broker">
<input type="hidden" name="agent" id="buyer-agent" value="false">uj5u.com熱心網友回復：
這是你想要的嗎：
如果是，請嘗試以下代碼：
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
$('input[type=radio][name="pet"]').change(function() {
var $radiobutton = $("input[value='" $(this).val() "']");
$radiobutton.prop("checked", true);
});
$('input[type=radio][name="pet2"]').change(function() {
var $radiobutton = $("input[value='" $(this).val() "']");
$radiobutton.prop("checked", true);
});
}, false);
</script>
</head>
<h2>Select a Pet</h2>
<div>
<input name="pet" type="radio" value="dog" /><span>Dog</span>
<input name="pet" type="radio" value="cat" /><span>Cat</span>
<input name="pet" type="radio" value="fish" /><span>Fish</span>
</div>
<div>
<input name="pet2" type="radio" value="dog" /><span>Dog</span>
<input name="pet2" type="radio" value="cat" /><span>Cat</span>
<input name="pet2" type="radio" value="fish" /><span>Fish</span>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/341451.html
標籤：javascript html 查询 形式
上一篇：如何在特定的懸停卡片上顯示訊息？