javascript - 选择函数中的单选按钮

Question

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

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

每次我进入控制台并输入“方法”时，它都会显示“ Uncaught 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 方法。

使用 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