Question

我在这里得到了一小段代码我已经工作了一段时间，但由于某些原因它不起作用。有人可以看看它并告诉我它有什么问题吗？

我需要它做的是当有人在文本框中输入金额时检查“其他金额”单选框。我还想清除在检查任何其他无线电时写入的金额。跨浏览器是必须的。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Donation amount</title>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<script type="text/javascript">
    $("#donationAmountMan").on("input propertychange change paste keyup", function() {
    if ($("#donationAmountMan").val().length > 0) {
        $("#da_man").prop("checked", true);
    } else {
        $("#da_man").prop("checked", false);
    }
});
</script>

</head>
<body>
    <label>Donation amount</label>
    <div>
        <label><input type='radio' name='donationAmount' id='da25' value='25' required /> $25</label>
        <label><input type='radio' name='donationAmount' id='da50' value='50' required /> $50</label>
        <label><input type='radio' name='donationAmount' id='da100' value='100' required /> $100</label>
        <label><input type='radio' name='donationAmount' id='da150' value='150' required /> $150</label>
        <label><input type='radio' name='donationAmount' id='da_man' value='0' required /> Other amount 
        <input type='text' name='donationAmountMan' id='donationAmountMan'>$</label>
    </div>
</body>
</html>

谢谢大家的宝贵帮助！

Answer 1

这应该适合你：

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
      <title>Donation amount</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    </head>
    <body>
            <label>Donation amount</label>
            <div>
                <form class="myForm">
                    <label><input type='radio' name='donationAmount' id='da25' value='25' required /> $25</label>
                    <label><input type='radio' name='donationAmount' id='da50' value='50' required /> $50</label>
                    <label><input type='radio' name='donationAmount' id='da100' value='100' required /> $100</label>
                    <label><input type='radio' name='donationAmount' id='da150' value='150' required /> $150</label>
                    <label><input type='radio' name='donationAmount' id='da_man' value='0' required /> Other amount 
                    <input type='text' name='donationAmountMan' id='donationAmountMan'>$</label>
                </form>
            </div>

            <script type="text/javascript">

                $(document).ready(function(){
                     $("#donationAmountMan").on("change", function() {
                        if ($("#donationAmountMan").val().length > 0) {
                            $("#da_man").prop("checked", true);
                        }
                    });
                    $(".myForm input[type=radio]").on("click", function() {
                        if ($(this).val() != "0") {
                            $('#donationAmountMan').val('');
                        }
                    });  
                });

            </script>

    </body>
    </html>

我做了什么：

将JS代码移至页面末尾的脚本标记
包含jQuery而不是jQuery UI
添加了一个支持DOM的处理程序
使用适当的选择器

jQuery和jQuery UI是不同的库。 jQuery UI专门用于引入一组UI小部件，您在此页面中没有使用这些小部件。顺便说一句，jQuery UI使用jQuery作为依赖项，所以如果你做使用它，你应该事先加载jQuery。但是在你的例子中没有必要。

我将JS代码移到了页面末尾的BODY元素中。这很好（我认为）在像你这样的非常小的例子中。我应该注意到，对于大多数网站而言，它并不是一个非常好的形式，特别是如果它们庞大而复杂的话。这里有一个很好的讨论： https://stackoverflow.com/a/24070373/6441528

在这种情况下，DOM-ready处理程序（$(document).ready）（基于我构造它的方式）确保在执行诸如try之类的操作之前将您操作的DOM元素加载到DOM中向他们添加事件处理程序。

修改的

我对此进行了编辑，因为虽然我的初步答案有效，但它确实不是处理它的最佳方法。由于无线电都在同一组中，因此无需循环使用它们。只需选择其他＆＃39;收音机显然会取消其他选择。我还想添加更多解释，以便你知道我为什么做了我做的事。

Answer 2

将jquery代码移动到正文的末尾，或者在文档就绪调用中打包！

填写文本框

2 个答案: