在函数中选择单选按钮

Question

所以这里我有一个带有单选按钮和提交输入的 html 表单。我遇到的问题是选择这些无线电输入并在事件函数中提醒选中的输入。

      <div id="shippingMethod">
            <label>Shipping Method:</label><br>
            <input type="radio" value="free Mail" name="r_method" id="freeMail" checked>      <label for="freeMail">Free Mail (1 Month)</label><br>

            <input type="radio" value="UPS" name="r_method" id="ups">
            <label for="ups">UPS (1 week)</label><br>

            <input type="radio" value="DHL" name="r_method" id="dhl">
            <label for="dhl">DHL (2-4 days)</label>
            <input type="submit" value="enter">
        </div>
        <script type="text/javascript">
            document.getElementById('shopping').addEventListener('submit', actions);
            function actions(event){
                event.preventDefault();

                var method = document.getElementById('shopping').r_method;
                for (var i = 0; i < method.length; i++){
                    if(method[i].checked == "true"){
                        alert(method[i].value);
            }
            }
            }
        </script>

每次我进入控制台并输入“方法”时，它都会显示“未捕获的 ReferenceError：方法未定义”，但是我在操作函数中定义了方法。当我每次按下提交输入时，也没有任何反应。但是，当我在控制台日志中创建此变量“方法”时。有用。 我该如何解决这个问题？

Answer 1

试试这个

document.getElementById('shippingMethod').addEventListener('submit', actions);
function actions(event){
  event.preventDefault();
  alert(document.querySelector('input[name="r_method"]:checked').value)
}

<form id="shippingMethod">
    <label>Shipping Method:</label><br>
    <input type="radio" value="free Mail" name="r_method" id="freeMail" checked>      <label for="freeMail">Free Mail (1 Month)</label><br>

    <input type="radio" value="UPS" name="r_method" id="ups">
    <label for="ups">UPS (1 week)</label><br>

    <input type="radio" value="DHL" name="r_method" id="dhl">
    <label for="dhl">DHL (2-4 days)</label>
    <input type="submit" value="enter">
</form>

编辑

错误：

• 您的 HTML 代码中没有 form 标记。事件submit 永远不会被触发，也永远不会调用你的actions 函数
• 您选择输入标签的方式应该是这样的： document.getElementById('shippingMethod').querySelectorAll('input[name="r_method"]'); 而不是 document.getElementById('shopping').r_method;。这样您就可以遍历包含所有元素的var method。

使用 for 循环的工作示例是

document.getElementById('shippingMethod').addEventListener('submit', actions);
function actions(event){
  event.preventDefault();
  var method = document.getElementById('shippingMethod').querySelectorAll('input[name="r_method"]');
  for (var i = 0; i < method.length; i++){
  	if(method[i].checked == true){
    	alert(method[i].value)
    }
  }
}

<form id="shippingMethod">
  <label>Shipping Method:</label><br>
  <input type="radio" value="free Mail" name="r_method" id="freeMail" checked>      <label for="freeMail">Free Mail (1 Month)</label><br>

  <input type="radio" value="UPS" name="r_method" id="ups">
  <label for="ups">UPS (1 week)</label><br>

  <input type="radio" value="DHL" name="r_method" id="dhl">
  <label for="dhl">DHL (2-4 days)</label>
  <input type="submit" value="enter">
</form>

看看这个HTML DOM querySelector() Method