根据单选按钮选择设置隐藏值答案

【问题标题】：Set hidden value based on radio button selection根据单选按钮选择设置隐藏值
【发布时间】：2021-06-28 20:19:35
【问题描述】：

找不到答案：

我搜索了 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 做到这一点？

要求：“寻找 VanillaJS 的答案。”

【问题讨论】：

标签： javascript html forms

【解决方案1】：

您可以尝试以下选项在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>

【讨论】：

【解决方案2】：

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">

【讨论】：

【解决方案3】：

您可以简单地监听所有单选按钮上的“更改”事件，然后相应地设置值。

这是我编写并测试过的 sn-p 代码

(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>

【讨论】：

找不到答案：

这是我的问题：

像这样：&lt;input type="hidden" name="criteria" value="0"&gt;

要求：“寻找 VanillaJS 的答案。”

像这样：`<input type="hidden" name="criteria" value="0">`