Hi,
The following code snippet uses jQuery as the JavaScript library but should be something you can use to get you going.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Radio Button</title>
</head>
<body>
<form method="post" id="myform">
<!-- at least in jQuery, you can just use the same name for the radio buttons but don't need to worry on the id attribute matching -->
<!-- I'm going to use a common class (rg1) so that I can identify these elements as a group in jQuery -->
A: <input type="radio" id="btnA" name="radiogroup1" class="rg1" value="1" />
B: <input type="radio" id="btnB" name="radiogroup1" class="rg1" value="2" />
C: <input type="radio" id="btnC" name="radiogroup1" class="rg1" value="3" />
</form>
<script type="text/javascript" src="lib/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
// when the DOM is ready, jQuery will run this function
$(document).ready(
function(){
// here we are setting up an onclick event handler for any element with a class of rg1
$('.rg1').click(
function(){
// when the click event is fired, we use this code to find out the value of the value attribute
// of the selected radio button. Keep in mind that the value of the value attribute will be a string
// and you'll beed to parse it into an integer (or floating point number) if you want to treat it as such
rbVal = parseInt( $('.rg1:checked').val() );
// now, just a basic switch statement to see which one was selected and to act on it
switch( rbVal )
{
case 1:
alert( 'you selected button A' );
// execute the code to add your btn A items
break;
case 2:
alert( 'you selected button B' );
// execute the code to add your btn B items
break;
case 3:
alert( 'you selected button C' );
// execute the code to add your btn C items
break;
default:
alert( 'I have no idea what you clicked' );
break;
}
}
);
}
);
</script>
</body>
</html>
2
Replies
AdChoices