使用其他單選按鈕更改單選按鈕的值

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>

感謝所有以任何方式做出貢獻的人。