un-check a checkbox

Hi everyone,

I am writing a function dealing with checkbox. I have 7 checkbox. If checkbox #6 is selected/checked, I want to make all the other checkbox un-check. Somehow, my JS code is not working. In my codes, I added some alerts to see where the code gets executed. Only the first alert gets executed. The alert inside the if statment is not executed and the last alert does not get executed either. Any idea why only the "outside if" alert statement gets executed. This happens when checkbox #6 is checked and not checked.

function verifyCheckbox5(form)
      {
      alert("outside if");
      if (form.q4a[5].checked) {
	alert("inside if");
   	form.q4a[0].checked=false;
	form.q4a[1].checked=false;
	form.q4a[2].checked=false;
	form.q4a[3].checked=false;
	form.q4a[4].checked=false;
	form.q4a[6].checked=false;
      }
      alert("after if");
}

Code (markup):

here is how the above function get called in the form:

<table>
             <tr>
	<td align=left><input type=checkbox name=q4a value=one></td>
	<td><font size=2 face="Arial, Helvetica">box1</font></td>
	</tr>
	<tr>
	<td align=left><input type=checkbox name=q4a value=two></td>
	<td><font size=2 face="Arial, Helvetica">box2</font></td>
	</tr>
	<tr>
	<td align=left><input type=checkbox name=q4a value=three></td>
	<td><font size=2 face="Arial, Helvetica">box3</font></td>
	</tr>
	<tr>
	<td align=left><input type=checkbox name=q4a value=four></td>
	<td><font size=2 face="Arial, Helvetica">box4</font></td>
	</tr>
	<tr>
	<td align=left><input type=checkbox name=q4a value=five></td>
	<td><font size=2 face="Arial, Helvetica">box5</font></td>
	</tr>
	<tr>
	<td align=left><input type=checkbox name=q4a value=six onClick="verifyCheckbox5(this)"></td>
	<td><font size=2 face="Arial, Helvetica">box6</font></td>
	</tr>
	<tr>
	<td align=left><input type=checkbox name=q4a value=seveno></td>
	<td><font size=2 face="Arial, Helvetica">box7</font></td>
	</tr>
</table>

Code (markup):

 

I see no <form> declaration in your html code

"Any idea why only the "outside if" alert statement gets executed. This happens when checkbox #6 is checked and not checked."

Write this:

<form name="form">
<!-- table here -->
</form>

should work.

Also onClick="verifyCheckbox5(this)" should be onClick="verifyCheckbox5(document.form)"

 

I tried your code and it did not work for me. I changed to your code onClick="verifyCheckbox5(document.form)" and still does not work. I did have the <form> </form> tags already (just did not included in the code here).

However, I did a few more thing to narrow down my problem. I decided to take out all the junk in the function and just leave the alerts and the alerts are working. But when I but in "form.q4a[0].checked=false;", it does not work. It does not seems like it recognizes what "form.q4a[0]" is.

for example, this works and both alerts are showing up on the screen:

function verifyCheckbox5(form) {
      alert("before");
      alert("after");
}

Code (markup):

However, this does not work, only the first alert is showing up on the screen and looks like execution stop at the next line and the last alert does not show up:

function verifyCheckbox5(form) {
      alert("before");
      form.q4a[0].checked=false;
      alert("after");
}

Code (markup):

so it is hanged up on the line form.q4a[0].checked=false;

thank you in advance for looking in and offering suggestion.

 

update...I found my problem. I am truely new to JS, CF, and HTML programming. Here is my problem. In my form, I did not give the form a name. Once, I gave the form a name, I can then reference those checkboxes and control those checkboxes. Without the form name, the function verifyCheckbox5() did not know what I was talking about when I tried to access the checkboxes in the form. Hehehe, this is probably a no brainer for longtime developers but it took me 1 full day of researching to see this flaw in my code. If this is how it is going to be for a beginner web programmer, I think I will have lots of grey hair. Thanks everyone for reading

function verifyCheckbox5() {
   alert("before");
   if(document.formname.q4f.checked){
      alert("inside");
      document.formname.q4a.checked=false;
   }	
   alert("after");
}



<form name="formname">
code for the checkboxes here
<tr>
<td align=left><input type="checkbox" name="q4f" value="unk" onClick="verifyCheckbox5()"></td>
<td><font size=2 face="Arial, Helvetica">unknown</font></td>
</tr>
</form>

Code (markup):

 

do few more years of JS