他のラジオボタンのラジオボタンの値を変更してください

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'); 
}); 
}); 

私は別のソリューションをしようと時間をインターネットで検索。最後に、私はW3SchoolsのページでJQueryのイベントメソッドについて読んで、私にとって正しいと思われるものをまとめようとしました。 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> 

いずれにせよ貢献した皆様、ありがとうございます。