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.<\/p>\n
\r\n<html>\r\n<head>\r\n<title>Sport Selector<\/title>\r\n<\/head>\r\n<body>\r\n<\/pre>\nThen we have our basic HTML codes to start the file.<\/p>\n
\r\n<form name="sports" method="post" action="insert.php">\r\nName:\r\n<input type="text" name="username" maxlength="35" size="35">\r\n<br \/><br \/>\r\nSelect the sports that you like to play:\r\n<table border = "1" cellpadding = "5">\r\n<\/pre>\nThen 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. <\/p>\n
\r\n<tr>\r\n<td><input type='checkbox' name=boxes[] value='Baseball' \/>Basketball<\/td>\r\n<td><input type='checkbox' name=boxes[] value='Basketball' \/>Basketball<\/td>\r\n<td><input type='checkbox' name=boxes[] value='Bowling' \/>Bowling<\/td>\r\n<\/tr><tr>\r\n<td><input type='checkbox' name=boxes[] value='Boxing' \/>Boxing<\/td>\r\n<td><input type='checkbox' name=boxes[] value='Cricket' \/>Cricket<\/td>\r\n<td><input type='checkbox' name=boxes[] value='Curling' \/>Curling<\/td>\r\n<\/tr><tr>\r\n<td><input type='checkbox' name=boxes[] value='Cycling' \/>Cycling<\/td>\r\n<td><input type='checkbox' name=boxes[] value='Hockey' \/>Hockey<\/td>\r\n<td><input type='checkbox' name=boxes[] value='Football' \/>Football<\/td>\r\n<\/tr><tr>\r\n<td><input type='checkbox' name=boxes[] value='Golf' \/>Golf<\/td>\r\n<td><input type='checkbox' name=boxes[] value='Lacrosse' \/>Lacrosse<\/td>\r\n<td><input type='checkbox' name=boxes[] value='Martial Arts' \/>Martial Arts<\/td>\r\n<\/tr><tr>\r\n<td><input type='checkbox' name=boxes[] value='Rugby' \/>Rugby<\/td>\r\n<td><input type='checkbox' name=boxes[] value='Tennis' \/>Tennis<\/td>\r\n<td><input type='checkbox' name=boxes[] value='Valleyball' \/>Valleyball<\/td>\r\n<\/tr><\/table>\r\n<\/pre>\nThen we add all of our checkboxes and then end the table.<\/p>\n
\r\n<input type="button" value="Check All" onclick="SetValues('sports', 'boxes[]', true);">\r\n<input type="button" value="Un-Check All" onclick="SetValues('sports', 'boxes[]', false);">\r\n<br \/><br \/> \r\n<\/pre>\nThen 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 \u201cinject\u201d the values into it. The Check All button sets the value equal to true and the uncheck all does them all to false.<\/p>\n
\r\n<input type='submit' value='Insert Sports'>\r\n<\/form>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nFinally, we create our submit button and end the form and HTML file normally.<\/p>\n
![\"check_boxes_with_javascipt_01\"](http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/06\/check_boxes_with_javascipt_01.jpg "\\"check_boxes_with_javascipt_01\\"")
<\/a><\/p>\n