[英]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.