Free Web Hosting by Netfirms
 Web Hosting by Netfirms | Free Domain Names by Netfirms

Checking if a checkbox is checked

Checkboxes are great objects when you want to allow the user to give a yes or no answer to a question. A checkbox is created with the input tag where the type property is set to checkbox. Just like all other form elements the checkbox can be reference by it's name.

This example is going to require the user to answer three questions:

  1. I want to join the program
  2. I want a free red hat
  3. I Love this web site
The user will answer these questions by checking or unchecking a corresponding checkbox then they will click the "send" button. Depending on checkbox checked combination selected an alert is shown with a tailored message. The desired output is to get the user to check all checkboxes. Run Code | View Code

Process

Events

The user pressing the checkAnswers button - onClick event of the button

Input

The three checkboxes - joinProgram, freeHat and loveWebSite

Event Trigger

The onClick event of the checkAnswers button will call the checkAnswers function.

The Solution

Define the checkboxes

Define three checkboxes with a label <input type="checkbox">I want to join the program <input type="checkbox"">I want a free red hat <input type="checkbox">I Love this web site Give each checkbox a name corresponding to their label <input type="checkbox" name="joinProgram">I want to join the program <input type="checkbox" name="freeHat">I want a free red hat <input type="checkbox" name="loveWebSite">I Love this web site

Define the button

<input type="button"> Set the message on the button's face. <input type="button" value="Send"> Register the button's "onClick" event <input type="button" value="Send" onclick=" "> Make the button's "onClick" event call the makeWindow() function <input type="button" value="Send" onclick= "checkRadio()">

checkAnswer

Function analysys

The checkAnswer's purpose is to check what checkboxes are checked and to show a corresponding message with the alert method.

This method first declares four local variables, joinProgram, freeHat , loveWebSite which are set to point to the checkboxes in the document and message that is set to a certain message depending on what checkboxes are checked.

After the checkbox references are set the script then goes through a six level deep nested if else sequence that tests five different checkbox check combinations.

The first condition checks if joinProgram is checked and loveWebSite is not checked. If this is the case message is set to "Why do you want to join the program when you do not love this web site?"

If the first condition was not satisfied the second condition checks if joinProgram is checked and freeHat is not checked. If this is the case message is set to "If your joining the program you can get a FREE red hat!"

If the second condition was not satisfied the third condition checks if loveWebSite is checked and freeHat is checked but joinProgram is not checked. If this is the case message is set "I Love this web site just like you and maybe the hat will look good on you But you can't have the hat if you do not join the program"

If the third condition was not satisfied the forth condition checks if the whole three are checked. If this is the case message is set to "You are my type of guy! Thank you for being interested in the our program that will keep you up all night with your free hat. You get all this and more because you love this web site and want everything we have to offer!"

If the forth condition was not satisfied the fifth condition checks if freeHat is checked but loveWebSite and joinProgram aren't checked. If this is the case message is set to ""No Hat for you because you do not love the web site and do not wanna join the program"

If the fifth condition was not satisfied which means no conditions were met so message is set to "Love is a wonderful thing but the hat and the program are much more wonderful!"

After processing all those nested if statements the message variable is alerted to the user with the alert method.

Comments with code

function checkAnswers(){
declare local variables var joinProgram var freeHat var loveWebSite var message set up checkbox references var joinProgram = document.myForm.joinProgram var freeHat = document.myForm.freeHat var loveWebSite = document.myForm.loveWebSite Is joinProgram checked and loveWebSite not checked checked? if(joinProgram.checked && !loveWebSite.checked){
Set message to a string message = "Why do you want to join the program when you hate this web site?" Otherwise
}else{
Is joinProgram checked and freeHat not checked? if(joinProgram.checked && !freeHat.checked){
Set message to a string message = "If your joining the program you can get a FREE red hat!" Otherwise
}else{
Is loveWebSite checked and freeHat checked but joinProgram isn't? if(loveWebSite.checked && freeHat.checked && !joinProgram.checked){
Set message to a string message = "I Love this web site just like you and maybe the hat will look good on you\n" + "But you can't have the hat if you do not join the program" Otherwise
}else{
Is loveWebSite and freeHat checked and joinProgram if(loveWebSite.checked && freeHat.checked && joinProgram.checked){
Set message to a string message = "You are my type of guy!\n Thank you for being interested in the our program\n" + " that will keep you up all night while you ware the free hat we are going to give to you.\n" + "You get all this and more because you Love this web site and want everything we have to offer!" Otherwise
}else{
Is joinProgram checked and freeHat not checked? if(freeHat.checked && !loveWebSite.checked && !joinProgram.checked){
Set message to a string message = "No Hat for you because you do not love the web site and do not wanna join the program" Otherwise
}else{
Set message to a string message = "Love is a wonderful thing but the hat and the program are much more wonderful!"
}
}
}
} alert the message alert(message)
} Run Code | View Code

See also: Radio button | Querying a text field's value | Select

Using alert | Using the status bar | Changing the background color of the document | Changing the content of a document | Using prompt | Using confirm | Changing the URL of a window Manually | Querying a text field's value | Checking the selected value of a select object | Checking if a radio button is selected in a group | Making a rollover | Preloading images | Getting the time | Using setTimeout/setInterval | Making windows | Making cookies

JavaScript Tutorial Home