Objective: We will learn how to manipulate radio buttons and some possible scenarios which we may encounter in our day to day coding.

Scenario 1: Find the current selected value of the radio group

Scenario 2: Programmatic approach for selecting a radio option

Scenario 3: Adding radio option dynamically

Scenario 4: Removing radio option dynamically

Scenario 5: Disable/enable radio buttons dynamically

Scenario 6: Capturing change events

 

Scenario 1: Find the current selected value of the radio group

Code:

<!DOCTYPE html>
<html>
	<head>
		<script src="mootools-core-1.4.5-full-compat.js"></script>
		<script>
					window.addEvent('domready', function(){
						$('fetch').addEvent('click',function(){
						alert('You just chose: '+$('myForm1').getElements('input[name=joblike]:checked').get('value'));
                        });
				});
			</script>
	</head>
	<body>
   <form id="myForm1" method="get" name="myForm1">
		<p>
			Do you like your job ?</p>
		<p>
			<input checked="checked" name="joblike" type="radio" value="Yes" />Yes</p>
		<p>
			<input name="joblike" type="radio" value="No" />No</p>
		<p>
			Click to know value chosen <input id="fetch" name="fetch" type="button" value="Click" /></p>
	</form>
	</body>
</html>

Explanation: We have two radio button grouped as joblike , as name. And a button,with id fetch, as you click on the button, the alert message fetches the current value. The code at line 8 above , gets the element that qualifies the checked radio button, by $('myForm1').getElements('input[name=joblike]:checked').get('value') .

Demo  Scenario 1: Find the selected value of the radio group

Do you like your job ?

Yes

No

Click to know value chosen

Scenario 2: Programmatic approach for selecting a radio option.

Code:

<!DOCTYPE html>
<html>
	<head>
		<script src="mootools-core-1.4.5-full-compat.js"></script>
		<script>
					window.addEvent('domready', function(){
						$('maleChoser').addEvent('click',function(){
                                                 $('myForm2').getElements('input[name=gender][value=1]').set('checked','true');
                                                 });
						$('femaleChoser').addEvent('click',function(){
                                                 $('myForm2').getElements('input[name=gender][value=2]').set('checked','true');
                                                 });
				});
			</script>
	</head>
	<body>
  <form id="myForm2" method="get" name="myForm2">
		<input name="gender" type="radio" value="1" />Male <input name="gender" type="radio" value="2" /> Female<br />
		<input id="maleChoser" type="button" value="Choose male" /> <input id="femaleChoser" type="button" value="Choose female" />&nbsp;</form>
	</body>
</html>

Explanation: A form with id "myForm2" has two radio buttons with name/group as "gender" , accompanying two buttons , each when clicked will be selecting the corresponding radio button. So on click of "Choose male" button we need to select the Male radio button, as shown in the line 7 and 8. The same goes for the female choser button. Note that the set('checked',true) make this happen.

Demo  Scenario 2: Programmatic approach for selecting a radio option

Male Female
 

Scenario 3: Adding radio option dynamically

Code:

<!DOCTYPE html>
<html>
	<head>
		<script src="mootools-core-1.4.5-full-compat.js"></script>
		<script>
					window.addEvent('domready', data-cke-saved-src="mootools-core-1.4.5-full-compat.js"></script>
		<script>
					window.addEvent('domready', function(){
						$('addRadio').addEvent('click',function(){
                        var val=$('myForm3').getElement('input[type=text][name=val]');
                        var text=$('myForm3').getElement('input[type=text][name=ht]');
           
                        // check if the values are already present
                        var countFlag=0;
                        Array.each($('myForm3').getElements('input[type=radio]').get('value'),function(existingVal,index){
                        if(val.get('value')==existingVal){
                            countFlag++;
                        }
                        });
                        if(countFlag==1){
                            alert('Two elements in radio cannot be same');
                        }else{
                            var radioElement=new Element('input',{'name':'hobby','type':'radio','value':val.get('value')});
                            var last=$('myForm3').getElements('p').getLast();
                            var som=radioElement.inject(last,'bottom');
                            som.appendText(text.get('value'),'after');
                            val.set('value','');
                            text.set('value','');
                            }
                       
                });
				});
			</script>
	</head>
	<body>
  
  <form id="myForm3">
		Choose your hobby/Add your hobby<br />
		<p>
			<input checked="checked" name="hobby" type="radio" value="1" />Playing Criket</p>
		Value of the radio<input name="val" type="text" value="" /><br />
		Text of the radio<input name="ht" type="text" value="" /><br />
		<input id="addRadio" type="button" value="Add this radio" />&nbsp;</form>
	</body>
</html>

Explanation: We have the form with one radio button , and two text fields , one that becomes the attribute , value of the newly formed radio button and the text , represeting the radio button. The "addRadio" button adds the radio button into the form.

We attached the click event to the "addRadio" button in line 7, on click of which we are doing a couple of things. Retrieve the element object of text fields in line 8 and 9. And in the line 13 we iterate the existing radio buttons and check if there is any radio buttons which value matches the current desired radio button. If such thing found we increase the counter declared in line 12. And in line 18 we check if the counter has a value equals 1 which means that there is an existing radio button with a value, in occurance of which we can't let the user to add a radio button ( I am sure you know that ,we should not have two radio buttons with same value of same radio buttons group) , thus we alert the user. Otherwise(in the else part ) we form  a radio element with name hobby ( cuase we need to add to the existing "hobby" radio group). and the value is what we retrieved from the designated value text box. Further we retrive the last element in the form , this is where we need to add our desired new radio button, we use inject and appendText to inject the radio element we formed and the text. Finally we reset the form by setting value to ''. Well, we could have used reset() function on the form. 

Demo  Scenario 3: Adding radio option dynamically

Choose your hobby/Add your hobby

Playing Criket

Value of the radio
Text of the radio
 

Scenario 4: Removing radio option dynamically

Code:

<!DOCTYPE html>
<html>
	<head>
		<script src="mootools-core-1.4.5-full-compat.js"></script>
		<script>
					window.addEvent('domready', data-cke-saved-src="mootools-core-1.4.5-full-compat.js"></script>
		<script>
					window.addEvent('domready', function(){
					 $('chosnRem').addEvent('click',function(){
                         var itemToRemove=$('myForm4').getElement('input[type=radio]:checked');
                        itemToRemove.getParent().dispose();// here dispose will do but will not take the text away
                       
                });
				});
			</script>
	</head>
	<body>
  
		<form id="myForm4">
		Choose your hobby
		<p>
			<input checked="checked" name="hubby" type="radio" value="Playing Criket" />Playing Criket</p>
		<p>
			<input name="hobby" type="radio" value="Playing Tennis" />Playing Tennis</p>
		<p>
			<input name="hobby" type="radio" value="Playing Chess" />Playing Chess</p>
		<p>
			<input name="hobby" type="radio" value="Playing Football" />Playing Football</p>
		<input id="chosnRem" type="button" value="Remote chosen" />&nbsp;</form>
	</body>
</html>

Explanation:
 We have four radio buttons, present in the form , and a button with id "chosnRem" , on click of which the current selected radio button has to be remove from the form "myForm4".  So at line 7 we attached the click event on "chosnRem", then at line 8 we find out which of the radio button is checked , then we use the get parent element p , and then we invoke the dispose function to remove the entire radio and the text associated with it.

Demo  Scenario 4: Removing radio option dynamically

Choose your hobby

Playing Criket

Playing Tennis

Playing Chess

Playing Football

 

Scenario 5: Disable/enable  radio buttons dynamically

Code:

<!DOCTYPE html>
<html>
	<head>
		<script src="mootools-core-1.4.5-full-compat.js"></script>
		<script>
					window.addEvent('domready', data-cke-saved-src="mootools-core-1.4.5-full-compat.js"></script>
		<script>
					window.addEvent('domready', function(){
					$('dall').addEvent('click',function(){
                                                 $('myForm5').getElements('input[name=hubby]').set('disabled','true');
                                                 });
					$('dckt').addEvent('click',function(){
                                                 $('myForm5').getElements('input[name=hubby][value=1]').set('disabled','true');
                                                 });
					$('dmsk').addEvent('click',function(){
                                                 $('myForm5').getElements('input[name=hubby][value=2]').set('disabled','true');
                                                 });
					$('eall').addEvent('click',function(){ //erase can also be used
                                                 $('myForm5').getElements('input[name=hubby]').removeProperty('disabled');
                                                 });
				});
			</script>
	</head>
	<body>
  
		<form id="myForm5" method="get" name="myForm5">
		Choose your hobby
		<p>
			<input checked="checked" name="hobby" type="radio" value="1" />Playing cricket</p>
		<p>
			<input name="hobby" type="radio" value="2" />Listening to Music</p>
		<p>
			<input id="dall" type="button" value="Disable all" /> <input id="dckt" type="button" value="Disable Playing cricket" /> <input id="dmsk" type="button" value="Disable Listening to music" /> <input id="eall" type="button" value="Enable all" /></p>
	</form>
	</body>
</html>

Explanation: We have two radio buttons,  and four buttons with ids as  dall,dckt,dmsk,eall and they are intended to disable all, disable radio button "Playing cricket" , disable "Listening to Music" , and enable all radio buttons respectively. So we attached click event to all of the buttons, and finally used the set method and removeProperty method to disable and enable on the radio buttons

Demo Scenario 5: Disable/enable  radio buttons dynamically

Choose your hobby

Playing cricket

Listening to Music

Scenario 6: Capturing change events

Code :

<!DOCTYPE html>
<html>
	<head>
		<script src="mootools-core-1.4.5-full-compat.js"></script>
		<script>
					window.addEvent('domready', function(){
					$('myForm6').getElements('input[name=lovesMe').addEvent('change',function(event){
						alert('she just changed her mind');
					});
				});
			</script>
	</head>
	<body>
  
		<form id="myForm6" method="get" name="myForm6">
		<p>
			<input checked="checked" name="lovesMe" type="radio" value="Yes" />She Loves Me</p>
		<p>
			<input checked="checked" name="lovesMe" type="radio" value="No" />She Loves Me Not</p>
	</form>
	</body>
</html>

Explanation: We have two radio buttons , and we want to attach the event "change" , so at line 7 we retrived all the radio buttons in the form, and attached the "change" event, on occurance of which , we put the alert message.

Demo Scenario 6: Capturing change events

She Loves Me

She Loves Me Not