0

皆さん、こんにちは。

このページには、ラジオ ボタンといくつかのスライダー (jquery UI) があります。ラジオ ボタンに問題があります。最初の質問に「はい」または「いいえ」で回答/選択し、2 番目の質問でも同じことをすると、最初の回答が消えます。なぜこれが起こるのか、私にはよくわかりません。なぜなら、各ラジオ ボタンには独自の ID があるからです。ここに私のコードがあります:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Module Lifestyle Questions</title>
    <link rel="stylesheet" href="//www.esystems.co.za/wimpie/jquery-ui-1.10.3/themes/base/jquery.ui.all.css">
    <script src="//www.esystems.co.za/wimpie/jquery-ui-1.10.3/jquery-1.9.1.js"></script>
    <script src="//www.esystems.co.za/wimpie/jquery-ui-1.10.3/ui/jquery.ui.core.js"></script>
    <script src="//www.esystems.co.za/wimpie/jquery-ui-1.10.3/ui/jquery.ui.widget.js"></script>
    <script src="//www.esystems.co.za/wimpie/jquery-ui-1.10.3/ui/jquery.ui.button.js"></script>
    <script src="//www.esystems.co.za/wimpie/jquery-ui-1.10.3/ui/jquery.ui.mouse.js"></script>
    <script src="//www.esystems.co.za/wimpie/jquery-ui-1.10.3/ui/jquery.ui.slider.js"></script>
    <link rel="stylesheet" href="//www.esystems.co.za/wimpie/jquery-ui-1.10.3/demos/demos.css">
    <script>
    $(function() {
        $( "#36" ).buttonset();
        $( "#37" ).buttonset();
        $( "#38" ).buttonset();
        $( "#slider-77" ).slider({
            min: 0,
            max: 10,
            value: 0,
            slide: function( event, ui ) {
                $( "#77" ).val( ui.value );
            }
        });
        $( "#slider-53" ).slider({
            min: 0,
            max: 50,
            value: 0,
            slide: function( event, ui ) {
                $( "#53" ).val( ui.value );
            }
        });

        $( "#54" ).buttonset();
        $( "#55" ).buttonset();

        $( "#77" ).val( $( "#slider-77" ).slider( "value" ) );
        $( "#53" ).val( $( "#slider-53" ).slider( "value" ) );

    });

    </script>
    <style type="text/css">
<!--
.style1 {
    font-size: medium;
    font-weight: bold;
}
.style2 {font-size: small}
.style3 {font-size: medium}
-->
    </style>
</head>
<body>

<table width="700" border="0">
  <tr>
    <td colspan="2" bgcolor="#5ACDC7"><span class="style1">Lifestyle Questions</span></td>
  </tr>
  <tr>
    <td colspan="2"><span class="style2"><p>Do you smoke?</p>
</span></td>
  </tr>
  <tr>
    <td colspan="2"><div id="36">
        <input type="radio" id="1" name="radio" /><label for="1">Yes</label>
        <input type="radio" id="2" name="radio"  /><label for="2">No</label>

    </div></td>
  </tr>
  <tr>
    <td colspan="2"><span class="style2"><p>Do you perform 30 minutes of physical activity at least 5 days a week?</p>
</span></td>
  </tr>
  <tr>
    <td colspan="2"><div id="37">
        <input type="radio" id="3" name="radio" /><label for="3">Yes</label>
        <input type="radio" id="4" name="radio"  /><label for="4">No</label>

    </div></td>
  </tr>
  <tr>
    <td colspan="2"><span class="style2"><p>Do you eat fruit, vegetables or berries everyday?</p>
</span></td>
  </tr>
  <tr>
    <td colspan="2"><div id="38">
        <input type="radio" id="5" name="radio" /><label for="5">Yes</label>
        <input type="radio" id="6" name="radio"  /><label for="6">No</label>

    </div></td>
  </tr>
  <tr>
    <td><span class="style2"><p>On a scale from 0-10 how healthy are you?</p>
</span></td>
    <td><label for="77"><span class="style2"><span class="style2">Health:</span></span></label>
      <input name="77" type="text" id="77" style="border:0; color:#5ACDC7; font-weight:bold;" /></td>
  </tr>
  <tr>
    <td colspan="2"><div id="slider-77" style="height:8px;"></div></td>
  </tr>
  <tr>
    <td><span class="style2">
      <p>How many alcoholic drinks do you consume per week?</p>
</span></td>
    <td><label for="53"><span class="style2">Drinks:</span></label>
    <input name="53" type="text" id="53" style="border:0; color:#5ACDC7; font-weight:bold;" /></td>
  </tr>
  <tr>
    <td colspan="2"><div id="slider-53" style="height:8px;"></div></td>
  </tr>
  <tr>
    <td colspan="2"><span class="style2"><p>How would you rate your health?</p>
</span></td>
  </tr>
  <tr>
    <td colspan="2"><div id="54">
        <input type="radio" id="7" name="radio" /><label for="7">Bad</label>
        <input type="radio" id="8" name="radio"  /><label for="8">Okay</label>
        <input type="radio" id="9" name="radio"  /><label for="9">Good</label>
        <input type="radio" id="10" name="radio"  /><label for="10">Very Good</label>

    </div></td>
  </tr>
  <tr>
    <td colspan="2"><span class="style2"><p>How motivated are you to improve your lifestyle?</p>
</span></td>
  </tr>
  <tr>
    <td colspan="2"><div id="55">
        <input type="radio" id="11" name="radio" /><label for="11">Not Motivated</label>
        <input type="radio" id="12" name="radio"  /><label for="12">A Little Motivated</label>
        <input type="radio" id="13" name="radio"  /><label for="13">Motivated</label>
        <input type="radio" id="14" name="radio"  /><label for="14">Very Motivated</label>

    </div></td>
  </tr>
</table>
<p>&nbsp;</p>
</body>
</html>

誰かがアドバイスをしてくれるか、間違いがどこにあるかを指摘していただければ幸いです。ありがとう

4

1 に答える 1

0 
   <td colspan="2"><div id="54">
        <input type="radio" id="7" name="radio" /><label for="7">Bad</label>
        <input type="radio" id="8" name="radio"  /><label for="8">Okay</label>
        <input type="radio" id="9" name="radio"  /><label for="9">Good</label>
        <input type="radio" id="10" name="radio"  /><label for="10">Very Good</label>

    </div></td>
  </tr>
  <tr>
    <td colspan="2"><span class="style2"><p>How motivated are you to improve your lifestyle?</p>
</span></td>
  </tr>
  <tr>
    <td colspan="2"><div id="55">
        <input type="radio" id="11" name="radio1" /><label for="11">Not Motivated</label>
        <input type="radio" id="12" name="radio1"  /><label for="12">A Little Motivated</label>
        <input type="radio" id="13" name="radio1"  /><label for="13">Motivated</label>
        <input type="radio" id="14" name="radio1"  /><label for="14">Very Motivated</label>

    </div></td>

1つのグループとしてラジオを取る 1つのグループに異なる名前を付ける

于 2013-11-04T11:27:53.633 に答える