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?
 
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
 
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
geeta_m9Author Commented:
Sorry, I meant to say on line 481.
0
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.