Question

因此，我一直在尝试创建一个动态表单，通过选择用户的客户类型来更改提供的包的价值。我的JSFiddle形式的部分：

https://jsfiddle.net/mullern/ch8z0hry/4/

$(document).ready(function(){
$('#student').on('click', function() {
    $('#minimal').val('100');
    $('#soundonly').val('150');
    $('#soundandlight').val('175');
    $('#totalpartypackage').val('200');
});
$('#private').on('click', function() {
    $('#minimal').val('150');
    $('#soundonly').val('200');
    $('#soundandlight').val('300');
    $('#totalpartypackage').val('400');
});
$('#company').on('click', function() {
    $('#minimal').val('200');
    $('#soundonly').val('300');
    $('#soundandlight').val('400');
    $('#totalpartypackage').val('50');
});
});

我在网上搜索了几个小时尝试不同的解决方案。最后，我通读了关于JQuery事件方法的W3schools页面，并尝试拼凑出对我来说似乎正确的东西。在JSFiddle中我还包括一个脚本来检查Radiobuttons的值。我注意到JSFiddle似乎工作，但在我自己的私人服务器上却没有。我做错了什么？

编辑：我目前正在使用Webstation在我的synology NAS上运行该页面。

Answer 1

你在控制台中有错误的javascript吗？你加入了jquery？

尝试插入此内容：

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

Answer 2

我一直在摆弄代码并得出结论它实际上工作正常。您可以查看我的JSFiddle以查看最终结果：

https://jsfiddle.net/mullern/no0qfqhh/

我开始使用的代码实际上已经是正确的了。

$(document).ready(function(){
$('#student').on('click', function() {
    $('#minimal').val('100');
    $('#soundonly').val('150');
    $('#soundandlight').val('175');
    $('#totalpartypackage').val('200');
});
$('#private').on('click', function() {
    $('#minimal').val('150');
    $('#soundonly').val('200');
    $('#soundandlight').val('300');
    $('#totalpartypackage').val('400');
});
$('#company').on('click', function() {
    $('#minimal').val('200');
    $('#soundonly').val('300');
    $('#soundandlight').val('400');
    $('#totalpartypackage').val('50');
});
});

使用最后的按钮可以非常简单地检查代码，尤其是在添加更多值并最终显示时，将来的测试。

<div class="form-field-contain" id="customertype">
                    <fieldset data-role="controlgroup">
                        <label><input type="radio" name="customertype" id="student" value="Student/Apprentice">Stundent/Apprentice</label>
                        <label><input type="radio" name="customertype" id="private" value="private" checked="checked">Private</label>
                        <label><input type="radio" name="customertype" id="company" value="company">Company</label>
                    </fieldset>
            </div>
            <div class="form-field-contain" id="prices">
                <fieldset data-role="controlgroup" id="pricetag">
                    <label><input type="radio" name="price" id="minimal" value checked="checked">Minimal</label>
                    <label><input type="radio" name="price" id="soundonly" value>Sound Only</label>
                    <label><input type="radio" name="price" id="soundandlight" value>Sound and Light</label>
                    <label><input type="radio" name="price" id="totalpartypackage" value>Total Party Package</label>
                    <label><input type="radio" name="price" id="custom" value="">Custom</label>
                </fieldset>
            </div>
    <script>
                function display() {
                    var a = document.getElementById('minimal').value;
                    var b = document.getElementById('soundonly').value;
                    var c = document.getElementById('soundandlight').value;
                    var d = document.getElementById('totalpartypackage').value;
                            alert("The value of the radio buttons are: " + a + " and " + b + " and " + c + " and " + d);
        }
                </script>
            <button onclick="display()">Check</button>

感谢所有以任何方式做出贡献的人。

使用其他单选按钮更改单选按钮的值

2 个答案: