[英]Set hidden value based on radio button selection
然而，我搜索了 Stack Overflow，盡管找到了很多類似的帖子——以及更復雜的情況——我仍然找不到我想要解決的問題的答案。
我有四個單選按鈕和一個隱藏字段：
<!-- My HTML Document -->
<form action="/my-doc.html" method="post">
<!-- The 4 Radio Buttons-->
<input type="radio" name="game" value="1" checked> First
<input type="radio" name="game" value="2"> Second
<input type="radio" name="game" value="3"> Third
<input type="radio" name="game" value="4"> Fourth
<!-- The Hidden Field -->
<input type="hidden" name="criteria" value="1">
<!-- My Submit Button -->
<input type="submit" name="action" value="Go">
</form>
我需要做的是設置<input type="hidden" name="criteria" value="1"> ，使其為 0
<input type="hidden" name="criteria" value="0">...但只有在用戶選擇第一個或第二個單選按鈕之后。 如果選擇了任何其他單選按鈕，隱藏字段的值應保持等於 1。
一個人如何使用 JavaScript 做到這一點？
您可以在javascript中嘗試以下選項
function setValue() {
var selectedRadio = '';
var games = document.getElementsByName('game')
for (var i = 0; i < games.length; i++) {
if (games[i].checked) {
selectedRadio = games[i].value;
}
}
document.getElementById("hdnSelectedRadValue").value = (selectedRadio == "1" || selectedRadio == "2") ? "0" : "1";
return false;
}
在 HTML 端進行的更改
<body style="background-color: #f2f2f2;">
<form action="some.htm" method="post">
<input type="radio" name="game" value="1" checked> First
<input type="radio" name="game" value="2"> Second
<input type="radio" name="game" value="3"> Third
<input type="radio" name="game" value="4"> Fourth
<input type="text" name="criteria" id="hdnSelectedRadValue">
<input type="submit" name="action" value="Go" onclick="setValue();">
</form>
</body>
var radios = document.querySelectorAll('input[type=radio][name="game"]'); radios.forEach(radio => radio.addEventListener( 'change', () => { document.getElementsByName("criteria")[0].value = parseInt(radio.value, 10) > 2 ? '1' : '0'; } ));
<input type="radio" name="game" value="1" checked> First <input type="radio" name="game" value="2"> Second <input type="radio" name="game" value="3"> Third <input type="radio" name="game" value="4"> Fourth <input type="hidden" name="criteria" value="1"> <input type="submit" name="action" value="Go">
您可以簡單地收聽所有單選按鈕上的“更改”事件，然后相應地設置值。
這是我編寫和測試的片段代碼
(function(){ let hdfValue = document.getElementById("myhiddenfield") let radioButtons = document.querySelectorAll('input[name="game"]'); let submitButton = document.querySelector('input[name="action"]') radioButtons.forEach((input) => { input.addEventListener('change', function(e){ let radioButtonValue = e.target.value if(radioButtonValue == 1 || radioButtonValue == 2){ hdfValue.value = 0; } else { hdfValue.value = 1; } }); }); submitButton.addEventListener("click", function() { console.log(hdfValue.value) }); })()
<form> <input type="radio" name="game" value="1" checked> First <input type="radio" name="game" value="2"> Second <input type="radio" name="game" value="3"> Third <input type="radio" name="game" value="4"> Fourth <input type="hidden" name="criteria" id="myhiddenfield" value="1"> <input type="button" name="action" value="Go"> </form>
根據復選框的選擇保留隱藏單選按鈕的默認值
[英]Preserve the default value of hidden radio button based on check box selection
從另一組中選擇單選按鈕時自動選擇單選按鈕
[英]auto selection of a radio button on selection of radio button from another set
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.