2013-11-04 109 views
0

大家好日子,jquery UI - 單選按鈕

好的,在這個頁面我有單選按鈕和一些滑塊(jQuery UI)。我對單選按鈕有問題,如果有人回答/選擇第一個問題是/否,並且我對第二個問題也是這樣,那麼第一個回答就會消失。我真的不知道爲什麼會發生這種情況,因爲每個單選按鈕都有自己的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> 

我將不勝感激,如果有人可以有一些建議或許指出其中的錯誤是。感謝名單「巴亞拉

+0

HTML ID不能與數字開始給不同勢名稱。 http://stackoverflow.com/questions/5672903/can-i-have-a-div-with-id-as-number – RafH

+0

給第一個問題和第二個問題的diffrenet名稱 – sarath

回答

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> 

它是以無線電作爲一個組一個組