Jquery UI - radio buttons
Question
Good day everybody,
okay, in this page I have radio buttons and some sliders (jquery UI). I have a problem with the radio buttons, if one answers/select the first question yes/no and I do the same with the second question then the first answer disappears. I really don't know why this happens, 'cause each radio button has its own id. here is my code:
<!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>
I would appreciate it if someone could have some advise or maybe point out where the mistake is. Thanx 'yal
1 answers
solution1
0 ACCPTED 2013-11-04 11:27:53
<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>
it is take radio as one group give diffrent name for one group
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
JQuery UI to convert multiple groups of radio buttons into a slider
jQuery Custom Radio Buttons not working as radio buttons
jquery calculations with radio buttons
JQuery with radio buttons not working
Jquery and radio buttons
Toggling Radio Buttons with jQuery
Using Jquery with Radio buttons
jQuery mobile radio buttons
jquery radio buttons not switching?
Jquery radio buttons logic
Related Tags