Question

This is my first time to post my query on stackoverflow. I have created one form and in the form have a drop down of few cities. On drop down change related group of radio button get displayed. Every radio button has same name as “preferred_location”.

On any selection of radio button i want to mark one checkbox as CHECKED. I have tried lots of option available on net and they sound simple and work in demo but not in my code. To review i have posted my code sample here below:

Jquery script

$(document).ready(function(){
        $("#address input[name*='redio']").click(function() {
            $('#note').removeClass("inactive").addClass("active");
        });  
    });

To display radio button group on change of dropdown i am using below code

if(valuecheckdrop == "Coimbatore"){ 
   $("#address").html("<h2>Select date of info session:</h2>",
       "<p>",
       "<input type='radio' name='preferred_location' value='Radio1' class='redio' /> Radio1",
       "</p>",
       "<p class='sub'>address</p>",
       "<p class='option'>",
           "<input type='radio' name='preferred_location' value='Radio2'  class='redio' />Radio2",
       "</p>",
       "<p class='sub'>Address2</p>");
}

On drop down change group of radio button get displayed but nothing is happen on click of radio button.

Is it because i am calling radio button on change event of drop down? Any help will be appreciated.

Answer 1

   $(document).ready(function () {
                $("#graduate").change(function () {
                    var valuecheckdrop = $("#graduate").val();
                     $('#cbTest').prop('checked', false);
                    if (valuecheckdrop == "") {
                        $("#note").show();

                        //$("#address").removeClass("addresson").addClass("addressoff");
                        //Or
                        $("#address").html('');

                    } else {
                        $("#note").hide();

                        //$("#address").removeClass("addressoff").addClass('addresson');

                        switch (valuecheckdrop) {
                            case 'Bangalore':
                                $("#address").html("<h2>Select date of info session:</h2><p><input type='radio' name='preferred_location' value='June 2, 2012, Sat 11am - 1pm The Presidency, No. 1 St Marks Road' class='redio' /> June 2, 2012 <span>(Sat 11am - 1pm)</span></p><p class='sub'>The Presidency, No. 1 St Marks Road</p><p class='option'><input type='radio' name='preferred_location' value='June 2, 2012, Sat 3pm - 5pm Manipal Center, Dickenson Road' class='redio' /> June 2, 2012 <span>(Sat 3pm - 5pm)</span></p><p class='sub'>Manipal Center, Dickenson Road</p><p class='option'><input type='radio' name='preferred_location' value='June 3, 2012, Sun 12noon - 5pm Taj Gateway Hotel, Residency Road' class='redio' />June 3, 2012 <span>(Sun 12noon - 5pm)</span></p><p class='sub'>Taj Gateway Hotel, Residency Road</p><p class='option'><input type='radio' name='preferred_location' value='June 4, 2012, Mon 11am - 1pm S&B Towers, MG Road' class='redio' />June 4, 2012 <span>(Mon 11am - 1pm)</span></p><p class='sub'>S&B Towers, MG Road</p>");
                                break;
                            case 'Chandigarh':
                                $("#address").html("<h2>Select date of info session:</h2><p><input type='radio' name='preferred_location' value='May 26, 2012, Sat 10:30am - 5:30pm The Park Hote, Anna Salai' class='redio' /> May 26, 2012 <span>(Sat 10:30am - 5:30pm)</span></p><p class='sub'>The Park Hote, Anna Salai</p><p class='option'><input type='radio' name='preferred_location' value='May 28, 2012, Mon 1pm - 3pm No. 16, Nungambakkam' class='redio' />May 28, 2012<span>(Mon 1pm - 3pm)</span></p><p class='sub'>No. 16, Nungambakkam</p><p class='option'><input type='radio' name='preferred_location' value='May 28, 2012, Mon 10am - 12noon Sindur Shopping Centre, Anna Nagar' class='redio' /> May 28, 2012 <span>(Mon 10am - 12noon)</span></p><p class='sub'>Sindur Shopping Centre, Anna Nagar</p>");
                                break;
                        }

                        //$("#address").find(':radio:first').prop('checked', true);
                    }
                });

                $("#graduate").trigger('change');

                $("#address").find(':radio').live('click', function (e) {
                    $('#cbTest').prop('checked', $("#address").find(':radio:checked').length > 0);
                });
            });​