Reputation: 59
I have a checkbox (#FBmngCH
) that reveals a set of radio buttons (name=adManage
) when clicked. When the checkbox is unclicked, the radio button that was previously selected still remains checked. I would like to have the checked status of the radio button removed once the checkbox is unchecked.
This is being used in a form, so if the user changes their mind about selecting that service, I would like the details about that service to be wiped also (so the value of the selected radio will not end up in the PHP and ultimately the email). I hope this makes sense.
I have given this some considerable time and am not seeming to get this to work correctly. The last set of if-statements is the part of the code that I wrote. Not sure if I am missing something, selecting something wrong, or what. Any help with this would be highly appreciated. Thanks!
HTML
<li>
<input type="checkbox" class="cbox" name="FBchecks[]" value="Facebook Ad MGMT" id="FBmngCH">
<label for="test">Facebook Ad Management</label>
<ul id="FBmngList">
<li>
<input type="radio" name="adManage" value="Ad Management 1" id="adMan1">
<label for="adMan1">Ad Fund - 1</label>
</li>
<li>
<input type="radio" name="adManage" value="Ad Management 2" id="adMan2">
<label for="adMan2">Ad Fund - 2</label>
</li>
<li>
<input type="radio" name="adManage" value="Ad Management 3" id="adMan3">
<label for="adMan3">Ad Fund - 3</label>
</li>
<li>
<input type="radio" name="adManage" value="Ad Management 4" id="adMan4">
<label for="adMan4">Ad Fund - 4</label>
</li>
<div id="FBADerror" class="acctError"></div>
</ul>
</li>
JS
$FBmngCH = $("#FBmngCH");
$FBmngList = $("#FBmngList");
//hide FB Management List
$FBmngList.hide();
//on FB Management select
$FBmngCH.click(function() {
//toggle FB Management List
$FBmngList.toggle();
});
$FBadValid = false;
$FBADerror = $("#FBADerror");
//if FB Ad Management is checked
if ($FBmngCH.attr('checked')) function validateFB() {
$("input[name=adManage]").each(function () { //LoopingthroughradioButtons
// "this" is the current element(radio) in the loop
if ($(this).is(':checked')) {
$FBadValid = true; //Radio Button is Checked);
}
if ($FBadValid.attr = true ) {
$FBADerror.empty();
}
});
};
if ($FBmngCH.blur($FBadValid.attr = false)) {
$FBADerror.append("<li> Please select a Facebook Ad plan. </li>");
//appends error to document
}
if ($FBmngCH.blur($FBmngCH.not('checked'))) {
$("input[name=adManage]").each(function () {
if ($(this).is(':checked')) {
$("input[name=adManage]").removeAttr('checked');
}
});
//remove checks from radios
};
$("input[name=adManage]").click(validateFB);
Upvotes: 0
Views: 2164
Reputation: 9157
You have few errors in your code:
if ($FBmngCH.blur($FBadValid.attr = false)) {
This is not correct syntax. It should be:
$FBmngCH.blur(function(){
if ($FBadValid === false) {
}
});
Basically, since your're toggling the whole radios section and willing to remove their :checked
property without checking any conditions, you do not need for loops or if($(this).is(':checked'))
statements. Just remove :checked
propery from all the radios. You can also show the error message on each check-box click, without if
conditions, because the whole section is hidden anyways.
You should end up with very short code, like this:
$FBmngCH = $("#FBmngCH");
$FBmngList = $("#FBmngList").hide();
$FBADerror = $("#FBADerror");
$FBmngCH.click(function() {
// no need for loops and if's there. Radios and the message are hidden.
$FBmngList.toggle();
$FBADerror.html("<li> Please select a Facebook Ad plan. </li>");
$("input[name=adManage]").prop('checked', false);
});
$("input[name=adManage]").click(function(){
// no need for loops there. Radios and the message are hidden.
// Also, no need for if($(this).is(':checked')){. Since it's a click handler, something has to be :checked on radio click.
$FBADerror.empty();
});
Upvotes: 0
Reputation:
Maybe I am not understanding your requirements, but can't you just test for this in your checkbox event routine and uncheck the checked radio button:
$FBmngCH.click(function () {
//toggle FB Management List
$FBmngList.toggle();
if (!$FBmngList.attr('checked')) {
$FBmngList.find('input:checked').attr('checked', false);
}
});
See this Fiddle.
Upvotes: 1