Checkbox value checked based on radio button selected

I would like the checkbox, "Italian Wine Culture and Wine Pairing"  (the third one in the list) to be displayed as unchecked when the user selects the radio button "Program B". Currently the default is checked.

<div class="radioList">
                                <label>Choose a program:</label>
                                <input name="three-week-program" type="radio" value="Program A"  />&nbsp;Program A<br>
                                <input name="three-week-program" type="radio" value="Program B"  />&nbsp;Program B<br>
                                <input name="three-week-program" type="radio" value="Program C"  />&nbsp;Program C<br>
                                <input name="three-week-program" type="radio" value="Program D"  />&nbsp;Program D<br>
                            </div>
                           
                            <div class="field-checkboxlist">
                                <label>Select Group Cooking Course<span class="required">*</span></label>
                                <div class="checkboxList">
                                    <input class="groupCheckboxes2" name="3-week-GroupCourse_0" type="checkbox" value="Regional Cuisine"  />&nbsp;Regional Cuisine<br>
                                    <input class="groupCheckboxes2" name="3-week-GroupCourse_1" type="checkbox" value="Tuscan Cuisine"  />&nbsp;Tuscan Cuisine<br>
                             
                                    <input class="groupCheckboxes2" name="3-week-GroupCourse_2" type="checkbox" value="Italian Wine Culture & Wine Pairing" checked  />&nbsp;Italian WIne Culture & Wine Pairing<br>
                                    <input class="groupCheckboxes2" name="3-week-GroupCourse_3" type="checkbox" value="Italian Baking & Pastry"  />&nbsp;Italian Baking & Pastry<br>
                                    <input class="groupCheckboxes2" name="3-week-GroupCourse_4" type="checkbox" value="Gastronomic Tours - Food & Wine Visits in Florence"  />&nbsp;Gastronomic Tours - Food & Wine Visits in Florence<br><br />
                                  <input name="3-week-GroupCourse_5" type="checkbox" value="Italian Language program: LA VITA E' BELLA"  />&nbsp;Italian Language program: LA VITA E' BELLA<br>                                    
                                    <input name="3-week-GroupCourse_6" type="checkbox" value="Extra week of Cooking and/or Wine "  />&nbsp;Extra week of Cooking and/or Wine <br>
                                </div>
                            </div>
     
How could I accomplish something like that? I tried using the following "if statement" and it seems to work, except that I don't know how to place it without the code also appearing on the form.

if($("input:radio[name='three-week-program']:checked").val() == "Program B") {                                  
                                    <input class="groupCheckboxes2" name="3-week-GroupCourse_2" type="checkbox" value="Italian Wine Culture & Wine Pairing" />&nbsp;Italian WIne Culture & Wine Pairing<br>
  }
  else
  {
  <input class="groupCheckboxes2" name="3-week-GroupCourse_2" type="checkbox" value="Italian Wine Culture & Wine Pairing" checked />&nbsp;Italian WIne Culture & Wine Pairing<br>
  }                                  

Screen-Shot-2015-05-06-at-9.18.44-AM.png
geeta_m9Asked:
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.

Eddie ShipmanAll-around developerCommented:
Well, first off, it would make better sense to add IDs to your controls, it makes it much easier to manipulate the DOM with them.

I'd redo it like this:
<div class="radioList">
    <label>Choose a program:</label>
    <input name="three-week-program" type="radio" value="Program A" id="programA" />&nbsp;Program A<br>
    <input name="three-week-program" type="radio" value="Program B" id="programB" />&nbsp;Program B<br>
    <input name="three-week-program" type="radio" value="Program C" id="programC" />&nbsp;Program C<br>
    <input name="three-week-program" type="radio" value="Program D" id="programD" />&nbsp;Program D<br>
</div>

<div class="field-checkboxlist">
    <label>Select Group Cooking Course<span class="required">*</span></label>
    <div class="checkboxList">
        <input class="groupCheckboxes2" id="3-week-GroupCourse_0" name="3-week-GroupCourse_0" type="checkbox" value="Regional Cuisine"  />&nbsp;Regional Cuisine<br>
        <input class="groupCheckboxes2" id="3-week-GroupCourse_1" name="3-week-GroupCourse_1" type="checkbox" value="Tuscan Cuisine"  />&nbsp;Tuscan Cuisine<br>
                                                                  
        <input class="groupCheckboxes2" id="3-week-GroupCourse_2" name="3-week-GroupCourse_2" type="checkbox" value="Italian Wine Culture & Wine Pairing" checked  />&nbsp;Italian WIne Culture & Wine Pairing<br>
        <input class="groupCheckboxes2" id="3-week-GroupCourse_3" name="3-week-GroupCourse_3" type="checkbox" value="Italian Baking & Pastry"  />&nbsp;Italian Baking & Pastry<br>
        <input class="groupCheckboxes2" id="3-week-GroupCourse_4" name="3-week-GroupCourse_4" type="checkbox" value="Gastronomic Tours - Food & Wine Visits in Florence"  />&nbsp;Gastronomic Tours - Food & Wine Visits in Florence<br><br />
        <input id="3-week-GroupCourse_5" name="3-week-GroupCourse_5" type="checkbox" value="Italian Language program: LA VITA E' BELLA"  />&nbsp;Italian Language program: LA VITA E' BELLA<br>                                    
        <input id="3-week-GroupCourse_6" name="3-week-GroupCourse_6" type="checkbox" value="Extra week of Cooking and/or Wine "  />&nbsp;Extra week of Cooking and/or Wine <br>
    </div>
</div>

Open in new window

     
then add a change handler for the radio button to change the check state of the checkbox:
$("#programB").change(function() {
    $("#3-week-GroupCourse_2").attr("checked", !$("#programB").is(":checked") );
});

Open in new window

0
geeta_m9Author Commented:
I tried implementing what you suggested, but I don't see any difference, i.e., when I click on "Program B", the checkbox for "Italian Wine Culture and Wine Pairing" still stays checked. I added an id for each of the radio buttons and inserted the code you provided in the JavaScript section on line 48.
signup-form-new-ee.php
0
geeta_m9Author Commented:
Sorry, I meant to say on line 481.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Ray PaseurCommented:
This shows the jQuery way to toggle between the two input controls.
http://iconoun.com/demo/temp_geeta_m9.php
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style type="text/css">
/* STYLE SHEET HERE */
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
    $("#myRadio").click(function(){
        $('#myCheckbox').attr('checked', false);
    });
    $("#myCheckbox").click(function(){
        $('#myRadio').attr('checked', false);
    });
});
</script>

<title>HTML5 Page With jQuery in UTF-8 Encoding</title>
</head>
<body>

<noscript>Your browsing experience will be much better with JavaScript enabled!</noscript>

<input type="checkbox" checked id="myCheckbox" />
<input type="radio"            id="myRadio" />

</body>
</html>

Open in new window

0
geeta_m9Author Commented:
Thanks, Ray. I got it to work. One of the reasons why it wasn't working earlier is because I did not provide an id for the checkbox. I modified the code so that it now has an id:

<input class="groupCheckboxes2" name="3-week-GroupCourse_2" type="checkbox" value="Italian Wine Culture & Wine Pairing" id = "3-week-GroupCourse_2" checked  />&nbsp;Italian Wine Culture & Wine Pairing<br>

Then I added the following function to the JavaScript code:

<script>
$(function() {  
          $("#ProgramB").click(function() {
                      $("#3-week-GroupCourse_2").attr("checked", false );
          });  
    });
</script>

What I would like to do now is to add an else that will cause the checked attribute to be true, but I keep getting a syntax error.
0
Eddie ShipmanAll-around developerCommented:
@geeta_m9,
The code I provided does both, unchecks it when clicked and checks it when clicked again, or you can change your code to this:

$("#ProgramB").click(function() {
    // The $("#3-week-GroupCourse_2") checkbox will always be checked opposite of the $("#ProgramB")radio
    $("#3-week-GroupCourse_2").attr("checked", !$("#ProgramB").is(':checked') );     
});   

Open in new window

0
geeta_m9Author Commented:
I tried implementing the code you provided. The checkbox is unchecked when I click on Program B. However, when I click on another program radio button, e.g., Program A, C or D, it still remains unchecked. I want it to be checked again when I click on the other radio buttons.
0
Eddie ShipmanAll-around developerCommented:
That was unclear in your post
0
Eddie ShipmanAll-around developerCommented:
Ok, changing the attr() call to a prop() call made it work for all the radios.
$("input:radio[name='three-week-program']").click(function() {
    $("#3-week-GroupCourse_2").prop("checked", !$("#programB").is(":checked") );
});

Open in new window

Here's the fiddle:
http://jsfiddle.net/Mrbaseball34/fLdpu05q/
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
geeta_m9Author Commented:
It works great now, Eddie, thanks.
0
geeta_m9Author Commented:
I just had to change "#programB" to "#ProgramB" as that's how I had it coded.
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
jQuery

From novice to tech pro — start learning today.