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：方法未定义”但是我在actions函数中定义了方法。每当我按下提交输入时也没有任何反应。但是当我在控制台日志中创建此变量“method”时。有用。我该如何解决这个问题？

Answer 1

试试这个

＆＃13;

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

＆＃13;

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

＆＃13;

修改

错误：

HTML代码中没有form标记。事件submit永远不会被触发，永远不会调用您的actions函数

您选择输入标记的方式应该是这样的： document.getElementById('shippingMethod').querySelectorAll('input[name="r_method"]');代替document.getElementById('shopping').r_method;。这样，您就可以遍历包含所有元素的var method。

使用for循环的工作示例是

＆＃13;
＆＃13;
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) } } }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

看看这个HTML DOM querySelector() Method

选择功能中的单选按钮

1 个答案: