Javascript for check boxes

**Yoda** · 09-21-2006, 07:27 AM

Hi

I am looking for a script that will perform the following:

In my web form I have three questions, each with a yes and a no checkbox. When the users answers *all three* questions with no, he is supposed to get an alert (like an onClick alert).

Any help would be much appreciated!

Thanks much
Yoda

**codeexploiter** · 09-21-2006, 09:07 AM

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
function callMe()
{
	var len = document.form1.r.length;
	var i;
	var one,two,three;
	
	
	for(i=0;i<len;i++)
	{
		if(document.form1.r[i].checked)
			one = document.form1[i].value;
	}

	len = document.form1.r1.length;
		
	for(i=0;i<len;i++)
	{
		if(document.form1.r1[i].checked)
			two = " "+document.form1[i].value;
	}			
	
			len = document.form1.r2.length;
		
	for(i=0;i<len;i++)
	{
		if(document.form1.r2[i].checked)
			three = " "+document.form1[i].value;
	}			
	
	if(one ==0 && two == 0 && three ==0)
		alert('You Pressed all No');
	
}
</script>
</head>

<body>
<form name="form1" method="post" action="">
  <input name="r" type="radio" value="1">Yes
    <input name="r" type="radio" value="0">No
    <br>
   <input name="r1" type="radio" value="1">Yes
    <input name="r1" type="radio" value="0">No
        <br>
     <input name="r2" type="radio" value="1">Yes
    <input name="r2" type="radio" value="0">No
        <br>
	  <input type="button" onClick="callMe()" value="Go">
</form>
</body>
</html>

Hope this is what you were talking about

**Yoda** · 09-21-2006, 09:21 AM

yes and no. I don't want the GO button - the alert should come up automatically when the users clicks the third "no" check box.
Any ideas?

Yoda

**codeexploiter** · 09-21-2006, 09:32 AM

I've changed the HTML a bit, now it will trigger an alert box on two conditions:

1. User has to select first two NO button (based on your first post)
2. When they click on the third NO radio button it will trigger that alert box

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
function callMe()
{
	var len = document.form1.r.length;
	var i;
	var one,two,three;
	
	
	for(i=0;i<len;i++)
	{
		if(document.form1.r[i].checked)
			one = document.form1[i].value;
	}

	len = document.form1.r1.length;
		
	for(i=0;i<len;i++)
	{
		if(document.form1.r1[i].checked)
			two = " "+document.form1[i].value;
	}			
	
			len = document.form1.r2.length;
		
	for(i=0;i<len;i++)
	{
		if(document.form1.r2[i].checked)
			three = " "+document.form1[i].value;
	}			
	
	if(one ==0 && two == 0 && three ==0)
		alert('You Pressed all No');
	
}
</script>
</head>

<body>
<form name="form1" method="post" action="">
<input name="r" type="radio" value="1">Yes
<input name="r" type="radio" value="0">No
<br>
<input name="r1" type="radio" value="1">Yes
<input name="r1" type="radio" value="0">No
<br>
<input name="r2" type="radio" value="1">Yes
<input name="r2" type="radio" value="0" onClick="callMe()">No
</form>
</body>
</html>

In a situation where the user is clicking the third button first and then click first and second, they need to click the third radio NO button once more for triggering the alert box.

This can be solved using a small change in the HTML code like the following

HTML Code:

<form name="form1" method="post" action="">
<input name="r" type="radio" value="1">Yes
<input name="r" type="radio" value="0" onClick="callMe()">No
<br>
<input name="r1" type="radio" value="1">Yes
<input name="r1" type="radio" value="0" onClick="callMe()">No
<br>
<input name="r2" type="radio" value="1">Yes
<input name="r2" type="radio" value="0" onClick="callMe()">No
</form>

If you use the above mentioned code then it will trigger an alert box if all the 3 NO buttons are selected, the order is not important in this,

The user can select third, then first and then second it will give alert the only constraint is all must be NO

**Twey** · 09-21-2006, 03:18 PM

There are many problems with this code.

Code:

<script language="javascript">

language is deprecated for type.

Code:

if(document.form1.r[i].checked)

Forms may not be accessible as properties of document. You should use the document.forms collection.

Code:

<input name="r" type="radio" value="0" onClick="callMe()">No

There are more ways to select a radio button than a click (onchange should work, but unfortunately doesn't in [wait for it...] IE).

Code:

<script type="text/javascript">
function callback() {
  alert("Your message here");
}

function getRadioValue(el) {
  if(!el.length) return null;
  for(var i = 0; i < el.length; ++i)
    if(el[i].checked) return el[i].value;
  return null;
}

window.onload = function() {
  for(var i = 0, f = document.forms['form1'].elements; i < f.length; ++i)
    f[i].onclick = f[i].onchange = f[i].onkeypress = function() {
      var f = this.form.elements;
      if(getRadioValue(f.r) === "0" && getRadioValue(f.r1) === "0" && getRadioValue(f.r2) === "0")
        callback();
    };
};
</script>

Thread: Javascript for check boxes

Thread Tools

Search Thread

Javascript for check boxes

Bookmarks

Bookmarks

Posting Permissions