How do I check for my user unchecking a box that is checked by default?

My user has just submitted a form and, based on the input they've just entered, a box is going to be checked by default like this:

<input type="checkbox"  name="spanish_alert_yes" id="spanish_alert_yes" onchange="spanishAlertYes(this)" value="Y" checked>

Here's a screenshot:

screenshot
On the original form, I've got a little "interview" that's revealed in stages based on the way in which the user checks certain boxes. Should the user click on "yes" in response to the first question ("Will this Employer need a Spanish version and an English version? Check "yes" in the box to the right if you do..") , the "spanishAlertYes" function is triggered and it looks like this:

	function spanishAlertYes(check)
	{
		if(check.checked)
		{
			$('.submit_class').show(100);
			$('#spanish_alert_no').prop("checked", false);
			$('.employer_options').hide(100);
			$('#submit_explanation').html("<br><div style=\"width:95%; margin:auto; text-align:center; border:1px solid #cccccc; border-radius:10pt; padding:10px;\">When you click on \"Submit,\" you will be creating the basic aesthetics of your user's landing page. From here, you'll be directed to another interface where you'll being creating the user's Landing Page experience in Spanish.</div>");
		}
		else
		{
			//if this isn't checked, should the user have proceeded past this point and then backtracks and unchecks this button, you need to uncheck and zero out every checkmark that may have been put in place
			$("#emp_spouse_no").prop("checked", false);
			$("#emp_spouse_yes").prop("checked", false);
			$('#spanish_alert_no').prop("checked", false);
			$('.submit_class').hide(100);
			$('#submit_explanation').html("");
			$(".employee_spouse_name").hide(100);
		}
	}

Open in new window


...and it works just fine when the user is starting off with a new form and a checkbox that isn't checked by default.

When the user is at this point - where they've submitted the form, their response has been entered into a database and the box is checked by default - when they uncheck it, nothing happens. If they check on the "no" box or if they check the "yes" box again, then the Javascript functionality will kick in and everything works fine. But I want to engage the "else" portion of my "spanishAlertYes" function and I don't know how if the user is simply unchecking a box that is checked by default.

How can I code things so if a box that is checked by default is unchecked, my function will be triggered?

Thanks!
Bruce GustPHP DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
the issue is you must use radiobutton instead checkbox
Please note both have the same name BUT not the same ID(must be unique in a page) and value (Y or N)
be sure to use spanish_alert_yes_or_no instead spanish_alert_yes and spanish_alert_no
<input type="checkbox"  name="spanish_alert_yes_or_no" id="spanish_alert_yes" onchange="spanishAlertYes(this)" value="Y" checked="checked" /> 
<input type="checkbox"  name="spanish_alert_yes_or_no" id="spanish_alert_no" onchange="spanishAlertYes(this)" value="N" checked="checked" />

Open in new window


additionaly a bit of jQuery :
<script>
    jQuery(function($) {
	function spanishAlertYes()
	{
                var check = this;
		if( $(this).is(":checked") ) 
		{
			$('.submit_class').show(100);
			$('.employer_options').hide(100);
			$('#submit_explanation').html("<br><div style=\"width:95%; margin:auto; text-align:center; border:1px solid #cccccc; border-radius:10pt; padding:10px;\">When you click on \"Submit,\" you will be creating the basic aesthetics of your user's landing page. From here, you'll be directed to another interface where you'll being creating the user's Landing Page experience in Spanish.</div>");
		}
		else
		{
			//if this isn't checked, should the user have proceeded past this point and then backtracks and unchecks this button, you need to uncheck and zero out every checkmark that may have been put in place
			$("#emp_spouse_no").prop("checked", false);
			$("#emp_spouse_yes").prop("checked", false);
			$('.submit_class').hide(100);
			$('#submit_explanation').html("");
			$(".employee_spouse_name").hide(100);
		}
	}           
        $(":radio[name='spanish_alert_yes_or_no']").change(spanishAlertYes);
    });
</script>
</head>
<body>
......
<input type="checkbox"  name="spanish_alert_yes_or_no" id="spanish_alert_yes"value="Y" checked="checked" /> 
<input type="checkbox"  name="spanish_alert_yes_or_no" id="spanish_alert_no" value="N" checked="checked" />

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
hieloCommented:
>>  But I want to engage the "else" portion of my "spanishAlertYes" function and I don't know how if the user is simply unchecking a box that is checked by default.
Try using "onclick" instead of "onchange":
onclick="spanishAlertYes(this)"

Note however that for your purposes (as a stated by leakim971) radio buttons are more appropriate options than a checkboxes.  Think about it for a second -- if the "Yes" checkbox is checked, once it is unchecked it implies "No", thereby making the "No" checkbox redundant.  So you don't need two checkboxes to obtain a "Yes/No" response.  However, if you use a pair of radio buttons (two buttons with type="radio" having the same "name" but different "id" and "value" attributes) and you have one pre-checked radio button, the only way to "uncheck" the pre-checked button is by checking the other radio button, which is precisely what you are trying to achieve.
0
Bruce GustPHP DeveloperAuthor Commented:
Perfect!

Thanks!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.