【发布时间】：2013-11-04 19:27:53
【问题描述】：
大家好，
好的，在这个页面中，我有单选按钮和一些滑块（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> </p>
</body>
</html>
如果有人可以提供一些建议或指出错误所在，我将不胜感激。感谢'yal
【问题讨论】：
-
HTML ID 不能以数字开头。 stackoverflow.com/questions/5672903/…
-
为第一个问题和第二个问题提供不同的名称
标签： javascript jquery html user-interface radio-button