使用其他无线电按钮更改无线电按钮的值

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似乎有效，但在我自己的专用服务器上行不通。我在做什么错？

编辑：我目前正在使用网络网络运行该页面。

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>

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