Question

I’m using a CMS that hides form elements behind tags, because of some system quirks I’ve had to set up a checkbox that controls the radio buttons so if the checkbox is ticked the “yes” radio button is selected if not the “no” is selected. I also want the radio buttons to have option “no” checked by default but I don’t have control over the line of code for the radio buttons.

I found some Javascript that does a small part of this but I want to integrate it into the jQuery that displays and hides content when the box is ticked.

Here’s what I have so far:

$('#checkbox1').change(function() {
    $('#content1').toggle("slow");
});

The Javascript I have is this:

function ticked(){
    var ischecked = document.getElementById("checkbox").checked;
    var collection = document.getElementById("hideradio").getElementsByTagName('INPUT');
    if(ischecked){collection[0].checked = true;}else{collection[0].checked = false;}
}

Can you please help write a version of the Javascript but integrate with my jQuery?

Thanks,

Answer 1

You can try this, I assume your html as like this.

<input type="checkbox" id="checkbox1" /> Check Box

<div id="content1" >
    Some Content <br />
    Some Content <br />
    Some Content <br />
    Some Content
</div>

<div id="hideradio">
    <input type="radio" name="rgroup" value="yes" /> Yes
    <input type="radio" name="rgroup" value="no" />  No
</div>

JQuery

$(function(){
     $('#hideradio input[type=radio][value=no]').attr('checked',true);
     $('#content1').hide();
});

$('#checkbox1').on('change', function() {
    $('#content1').toggle("slow");
    var self = this;
    if(self.checked)
        $('#hideradio input[type=radio][value=yes]').attr('checked',true);
    else
       $('#hideradio input[type=radio][value=no]').attr('checked',true);
});

A Quick DEMO