Activate Radio Buttons Using Checkbox Conditions

Basically i'd like to activate radio buttons using a checkbox as per the conditions given below- If i check the checkbox, the first radio would be checked. If i change to another

Solution 1:

You can make use of removeProp() to unselect radio button and prop() to select checkbox.

$(function(){
  $('input[name=featured_ad]').change(function(){
     if(!$(this).is(":checked"))
       $("input[name=ad_pack_id]").removeProp("checked");
     else
        $("input[name=ad_pack_id]:first").prop("checked",true);
  });

  $('input[name=ad_pack_id]').click(function(){
      $('input[name=featured_ad]').prop("checked",true); 
  });
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><inputname="featured_ad"value="1"type="checkbox">condition
<br><br><inputtype="radio"name="ad_pack_id"value="497649">value 1<br><inputtype="radio"name="ad_pack_id"value="497648">value 2<br><inputtype="radio"name="ad_pack_id"value="497647">value 3<br>

Solution 2:

Here is an example using pure javascript.

Fiddle: http://jsfiddle.net/3bugg14y/1/

HTML:

<inputname="featured_ad"value="1"type="checkbox"onclick="resetradio(this)">condition
<br><br><inputtype="radio"name="ad_pack_id"value="497649"onclick="setcheckbox()">value 1<br><inputtype="radio"name="ad_pack_id"value="497648"onclick="setcheckbox()">value 2<br><inputtype="radio"name="ad_pack_id"value="497647"onclick="setcheckbox()">value 3<br>

JS:

functionresetradio (checkbox) {
    var radios = document.getElementsByName('ad_pack_id');
    var index = 0, length = radios.length;
    if (checkbox.checked == false) {
        for ( ; index < length; index++) {
            radios[index].checked = false;
        }
    }
    else {
        radios[index].checked = true;
    }
}

functionsetcheckbox () {
    var checkbox = document.getElementsByName('featured_ad')[0];
    if (checkbox.checked == false) {
        checkbox.checked = true;
    }
}

Solution 3:

If I understood correctly, You can do something like this:

$(':checkbox').on("click", function(event) {
  if (this.checked)
    $(':radio:first').prop('checked', this.checked);
  else
    $(':radio').prop('checked', this.checked);
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="checkbox"name="featured_ad"value="1">condition
<br><br><inputtype="radio"name="ad_pack_id"value="497649">value 1
<br><inputtype="radio"name="ad_pack_id"value="497648">value 2
<br><inputtype="radio"name="ad_pack_id"value="497647">value 3
<br>

Solution 4:

Check below snippet

function set(event){
    if(event.checked=== false && event.type === "checkbox"){
       var ele = document.querySelectorAll("input[type='radio']");
       for(var i = 0; i<ele.length; i++)
       {
          ele[i].checked = false;
       }
     }
    elseif(event.checked=== true && event.type === "checkbox"){
        var ele = document.querySelector("input[type='radio']");
        if(ele){
            ele.checked = true;
        }
    }
   elseif (event.type !== "checkbox")
   {
     var ele = document.querySelector("input[type='checkbox']");
     if(ele){
        ele.checked = true;
     }
    }
}

changes in html:

<input name="featured_ad" value="1"type="checkbox" onClick="set(this)">condition
<br><br>
<inputtype="radio"class="a" name="ad_pack_id" value="497649" onClick="set(this)">value 1<br>
<inputtype="radio"class="a" name="ad_pack_id" value="497648" onClick="set(this)">value 2<br>
<inputtype="radio"class="a" name="ad_pack_id" value="497647" onClick="set(this)">value 3<br>

Solution 5:

Added a property to hide/show the radio buttons based on the checkbox condition.

Fiddle: http://jsfiddle.net/3bugg14y/3/

HTML:

<inputname="featured_ad"value="1"type="checkbox"onclick="resetradio(this)">condition
<br><br><divid="buttons"style="display:none"><inputtype="radio"name="ad_pack_id"value="497649">value 1<br><inputtype="radio"name="ad_pack_id"value="497648">value 2<br><inputtype="radio"name="ad_pack_id"value="497647">value 3<br></div>

JS:

functionresetradio (checkbox)
{
    var radios = document.getElementsByName('ad_pack_id');
    var index = 0, length = radios.length;
    if (checkbox.checked == false)
    {
        document.getElementById('buttons').style.display='none';
        for ( ; index < length; index++)
        {
            radios[index].checked = false;
        }
    }
    else
    {
        document.getElementById('buttons').style.display='block';
        radios[index].checked = true;
    }
}