Unchecking Checkboxes 1

[PCHomepage]

I wrote a simple function to uncheck a checkbox when the other is checked. If neither is selected, then I expected it to submit nothing but it is apparently submitting 0. I purposely didn't use radio buttons in order to be able to deselect both in a pair which can't be done with radio buttons and I did not want to add a third choice for null.

However, that's not the question I have. There are two pairs of checkboxes but I combined the function for both. If I select opt0 or opt2, opt1 or opt3 are deselected as expected but if I then try to select opt1 or opt3, nothing happens until I manually uncheck opt0 or opt2. Since I am a PHP programmer and rarely use JavaScript, I am at a loss as to the problem and I can't spot any typos so can someone suggest a cure? A second set of eyes looking it over would be most appreciated.

<script type="text/javascript">
function setChecked(){
	var opt0 = document.getElementById("opt0");
	var opt1 = document.getElementById("opt1");
	var opt2 = document.getElementById("opt2");
	var opt3 = document.getElementById("opt3");
	if (opt0.checked){
	  opt1.checked = false;
	 } else if (opt1.checked){
	  opt0.checked = false;
	}
	if (opt2.checked){
	  opt3.checked = false;
	 } else if (opt3.checked){
	  opt2.checked = false;
	}
}
</script>

The HTML is partially database-driven and includes:

<label for="OffSite">Off Site:</label>
<?php $OffyesChecked = ($rowStaff['OffSite'] == 1) ? " CHECKED" : "";?>
<?php $OffnoChecked = ($rowStaff['OffSite'] == 0 && $rowStaff['OffSite'] != NULL) ? " CHECKED" : "";?>
<input type="checkbox" name="OffSite" id="opt1" value="1" <?=$OffyesChecked?> onclick="setChecked(this);">yes 
<input type="checkbox" name="OffSite" id="opt0" value="0" <?=$OffnoChecked?> onclick="setChecked(this);">no 

<label for="Club">Club:</label>
<?php $ClubyesChecked = ($rowStaff['Club'] == 1) ? " CHECKED" : "";?>
<?php $ClubnoChecked = ($rowStaff['Club'] == 0 && $rowStaff['OffSite'] != NULL) ? " CHECKED" : "";?>
<input type="checkbox" name="Club" id="opt3" value="1"<?=$ClubyesChecked?> onclick="setChecked(this);">yes 
<input type="checkbox" name="Club" id="opt2" value="0"<?=$ClubnoChecked?> onclick="setChecked(this);">no

 

[jpadie]

should they not be radio boxes not checkboxes?
and i wonder whether you mean to use the click event rather than the blur or onchange event? i suspect that's the issue as the click event happens before the value changes.

 

[PCHomepage]

No, as I tried to describe to avoid the question even coming up, I do not want radio buttons because once selected, they cannot be deselected and I do not want to have a third choice for no selection. I'm talking about clicking the check box, not the JavaScript functionality when checked. It is this functionality where I need the help as I rarely if ever write JavaScript and know very little about it. If you can suggest better code, I am ready, willing and able to give it a try!

 

[jpadie]

so the options for offsite are no or yes or nothing?

likewise 'club'?

thus not answering either question is a valid response?

 

[PCHomepage]

Yes, that's correct. I want no, yes or nothing. Nothing (neither checked in a pair) is supposed to make the field be NULL, while no makes it 0 and yes makes it 1. The default for the database field is also NULL. Therefore, it is also correct that answering neither is a valid response.

 

[vacunita]

I think the issues is more your un-checking logic. When you try to check say opt1 when opt0 is already checked what happens.

Your first if statement evaluates to true. Since opt0 is currently checked opt1 is set to false overriding your manual checking of the checkbox.

You need to alter your logic a bit. And use the onchange event instead of onclick. So the logic happens after the value has been set for the clicked-on checkbox.

function setChecked2(boxObj)
{
	var opt0 = document.getElementById("opt0");
	var opt1 = document.getElementById("opt1");
	var opt2 = document.getElementById("opt2");
	var opt3 = document.getElementById("opt3");
        //check to see if the activated object was checked. If it was unchecked you do not need to do anything
	if(boxObj.checked)
	{
                //Check which box was checked and uncheck the other one. 
		if(opt0 == boxObj)
		{
			opt1.checked=false;		
		}
		else if(opt1==boxObj)
		{
			opt0.checked=false;
		}
		else if(opt2 == boxObj)
		{
			opt3.checked=false;		
		}
		else if(opt3==boxObj)
		{
			opt2.checked=false;
		}
	}

	
}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[PCHomepage]

I described in my original question what happens when I check or uncheck boxes but it wasn't very clear so here is a clarification:

If I select opt0, opt1 is deselected as expected but if I then try to select opt1 again, nothing happens until I manually uncheck opt0.

Similarly, if I select opt2, opt3 is deselected but if I then try to select opt3 again, nothing happens until I manually uncheck opt2.

In any event, your code with the revised logic and the suggestion to change from onclick() to onchange() solved the immediate problem. Thank you!

 

[ChrisHirst]

If neither is selected, then I expected it to submit nothing but it is apparently submitting 0

If "unchecked", check box elements do not pass a value when submitted, it must be your collection routine that is making it into a zero.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[PCHomepage]

Thank you and yes, I know, but as it is a PHP issue and this is the JavaScript forum, I didn't pursue it here. I'll post the question in the appropriate forum.