Hi folks,
I'm afraid I'm pretty new to javascript, so I apologize in advance for my inexperience. I am trying to do a simple thing:

I have a page with three items that I want the user to agree to (a beta signup agreement).

I want them to have to check off all three boxes before the "continue" button becomes active.

I've searched and searched and found a few tutorials, but they only seem to get me halfway and then drop me off a cliff...

I don't need this to be a submit form or anything, just click the three boxes and then you can hit the "continue" button.

Thank you for your help!

9 Years
Discussion Span
Last Post by mbirame

First you have to disable the submit button then on each checkboxes onclick event do a check to see if all of them are checked, then enable the button again.

code will look something like this:

function check(){
if (document.getElementById('chkId1').checked==true && document.getElementById('chkId2').checked==true && document.getElementById('chkId3').checked==true){
document.getElementById(button).disabled = ' ';

Would you be willing to give me a snip of html to see what the checkbox and button would look like there in reference to this code?

Thank you for your help!


I've got this much, but still trying to figure out the button...

<script type="text/javascript">
function check(){
if (document.getElementById('chkId1').checked==true && document.getElementById('chkId2').checked==true && document.getElementById('chkId3').checked==true){
document.getElementById(button).disabled = ' ';
// -->

<input name="chkId1" value="1" id="chkId1" type="checkbox">
Terms Agreement</label>
<label for="myCheckbox2"><input name="chkId2" value="2" id="chkId2" type="checkbox">
<label for="myCheckbox3"><input name="chkId3" value="3" id="chkId3" type="checkbox">

Hi everyone,

mbirame &#8212; you could also try this one:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html id="xhtml10" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- W3Cs Standard Template : XHTML 1.0 Transitional DTD -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<style type="text/css" media="all">
/* <![CDATA[ */

/* ]]> */
<script type="text/javascript">
// <![CDATA[
var validate = function( form ) {
   var form = ( typeof( form ) === "object" ) ? form : document.getElementById( form );
   var pref = "chb";
   for ( var i = 0; i < 3; i++ ) { 
      if ( form[( pref + i )].checked ) {
         return true;
      } alert( "In order to continue, you must check all 3 items in the field" );
   return false;
// ]]>
<body id="body0">
<form id="testform" name="testform" action="process.php" onsubmit="return validate( this );">
<div id="div0">
<label for="chb0"><b>1.</b> Item&#32;<input type="checkbox" id="chb0" name="chb0" value="item1" /></label><br />
<label for="chb1"><b>2.</b> Item&#32;<input type="checkbox" id="chb1" name="chb1" value="item1" /></label><br />
<label for="chb2"><b>3.</b> Item&#32;<input type="checkbox" id="chb2" name="chb2" value="item3" /></label><br /><br />
<input type="submit" value="continue" />

hope it both helped...


Holy cow-that works beautifully! Thank you both! This was written in a way that I can learn too! Yea!

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.