Use JavaScript to Check/UnCheck Checkboxes

This tutorial will walk you through creating a basic HTML site with several checkboxes on it. Then it will show you how to use a single click on a button to check all objects and un-check all objects using JavaScript.

<SCRIPT LANGUAGE="JavaScript">
function SetValues(Form, CheckBox, Value)
{
	var objCheckBoxes = document.forms[Form].elements[CheckBox];
	var countCheckBoxes = objCheckBoxes.length;
	for(var i = 0; i < countCheckBoxes; i++)
		objCheckBoxes&#91;i&#93;.checked = Value;
}
</script>

First we declare our JavaScript function so that we can call it later. The first line sets the language we are using followed by the declaration and naming of the function as well as arguments for the fcuntion. Everything enclose in the {} will be run everytime that script is called. The first line sets every object that is a checkbox in the form to a variable. The second line then sets the length (the count of checkboxes) to a variable. Finnaly it runs a for loop until I is greater than the variable (again, the count of checkboxes). Then we end the script.

<html>
<head>
<title>Sport Selector</title>
</head>
<body>

Then we have our basic HTML codes to start the file.

<form name="sports" method="post" action="insert.php">
Name:
<input type="text" name="username" maxlength="35" size="35">
<br /><br />
Select the sports that you like to play:
<table border = "1" cellpadding = "5">

Then we create the form and set where the submit will send us. (We will learn how to grab these values in a later tutorial.) We also add a textbox to allow the user to submit there name up to 35 characters. Finally we create a table to organize the checkboxes in.

<tr>
<td><input type='checkbox' name=boxes&#91;&#93; value='Baseball' />Basketball</td>
<td><input type='checkbox' name=boxes&#91;&#93; value='Basketball' />Basketball</td>
<td><input type='checkbox' name=boxes&#91;&#93; value='Bowling' />Bowling</td>
</tr><tr>
<td><input type='checkbox' name=boxes&#91;&#93; value='Boxing' />Boxing</td>
<td><input type='checkbox' name=boxes&#91;&#93; value='Cricket' />Cricket</td>
<td><input type='checkbox' name=boxes&#91;&#93; value='Curling' />Curling</td>
</tr><tr>
<td><input type='checkbox' name=boxes&#91;&#93; value='Cycling' />Cycling</td>
<td><input type='checkbox' name=boxes&#91;&#93; value='Hockey' />Hockey</td>
<td><input type='checkbox' name=boxes&#91;&#93; value='Football' />Football</td>
</tr><tr>
<td><input type='checkbox' name=boxes&#91;&#93; value='Golf' />Golf</td>
<td><input type='checkbox' name=boxes&#91;&#93; value='Lacrosse' />Lacrosse</td>
<td><input type='checkbox' name=boxes&#91;&#93; value='Martial Arts' />Martial Arts</td>
</tr><tr>
<td><input type='checkbox' name=boxes&#91;&#93; value='Rugby' />Rugby</td>
<td><input type='checkbox' name=boxes&#91;&#93; value='Tennis' />Tennis</td>
<td><input type='checkbox' name=boxes&#91;&#93; value='Valleyball' />Valleyball</td>
</tr></table>

Then we add all of our checkboxes and then end the table.

<input type="button" value="Check All" onclick="SetValues('sports', 'boxes&#91;&#93;', true);">
<input type="button" value="Un-Check All" onclick="SetValues('sports', 'boxes&#91;&#93;', false);">
<br /><br /> 

Then we add the two input buttons that will automatically uncheck and check the boxes for us. Notice the onclick values. We are calling the function that we set up earlier and “inject” the values into it. The Check All button sets the value equal to true and the uncheck all does them all to false.

<input type='submit' value='Insert Sports'>
</form>
</body>
</html>

Finally, we create our submit button and end the form and HTML file normally.

check_boxes_with_javascipt_01

Once you save the file and open it, it should look like above. If you click the Check All button it will check the boxes and vice versa when you click the Un-Check All buton. This concludes this tutorial. I hope it was easy to follow. Thanks for reading.

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join the TeamTutorials mailing list and get the latest tips, tricks, and special discounts for members only.

Thanks! Please click the link in the email we just sent you to confirm.

  • Pingback: Use JavaScript to Check/UnCheck Checkboxes - Blue Box Sols()

  • sandra

    Hi!! Thank you so much for the tutorial!! This is very much helpful!!:)

  • gus

    I’d like a checkbox that UNCHECKS the other checkboxes in a single array. I’m also a bit confused since this javascript includes the form name. Does that mean that it will also uncheck objects in separate arrays that exist elsewhere in the same form?

  • Vivek

    function checkAll()
    {
    var sek=document.FormName.checkall;
    if(sek.checked == true)
    {
    for (var i=0; i<document.FormName.elements.length;i++)
    {
    var e=document.FormName.elements[i];
    if ((e.name != ‘checkall’) && (e.type==’checkbox’))
    {
    e.checked=true;
    }
    }
    }
    else
    {
    for (var i=0; i<document.FormName.elements.length;i++)
    {
    var e=document.FormName.elements[i];
    if ((e.name != ‘checkall’) && (e.type==’checkbox’))
    {
    e.checked=false;
    }
    }
    }
    }

  • Hi,
    I am preparing a form where I have to take value from database(limit) and then select the checkbox if it is within the limit that is present in database if it is beyond the limit a popup will have to be appear and person not allowed to check any checkbox further.

  • nastaran

    when I want to insert the selected sport I get the following message:
    “Server Error in ‘/WebSite5’ Application.

    The HTTP verb POST used to access path ‘/WebSite5/insert.php’ is not allowed.

    Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

    Exception Details: System.Web.HttpException: The HTTP verb POST used to access path ‘/WebSite5/insert.php’ is not allowed.

    Source Error:

    An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

    Stack Trace:

    [HttpException (0x80004005): The HTTP verb POST used to access path ‘/WebSite5/insert.php’ is not allowed.]
    System.Web.DefaultHttpHandler.BeginProcessRequest(HttpContext context, AsyncCallback callback, Object state) +2872570
    System.Web.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() +8677954
    System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously) +155

    Version Information: Microsoft .NET Framework Version:2.0.50727.3603; ASP.NET Version:2.0.50727.3082

    can you please let me know the reason

  • Please let me know if you’re looking for a article writer for your site.
    You have some really good articles and I feel I would be a good asset.
    If you ever want to take some of the load off, I’d really like to write some material for your blog in exchange for
    a link back to mine. Please send me an email if interested.
    Cheers!