jQuery with multiple radio groups, want only 1 group to have "yes" set rest change to "no"

Question

I need to make it so that when any group is set to "yes" the other groups are set to "no", with the possibility of it being set on load as well (so not necessarily just a click() event

I have been able to un-click all radios (which throws an error on submit) but cant figure out how to set the others to "0" value

Things I can do... change/add classes, change ID's (though there is not a set amount of values, it could be between 1 and 10 (or more) addresses in the list, dynamically generated from DB)

Here is the html, I cannot change the "name" because I do not have access to the form processing on this, just the html output (styling pretty much of someone else code)

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary"><input type="radio" id="primary-0-1" value="1" name="address[0][primary]" />Yes</label>
    <label class="btn btn-primary active"><input type="radio" id="primary-0-0" value="0" name="address[0][primary]" checked="checked" />No</label>
</div>
<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active"><input type="radio" id="primary-1-1" value="1" name="address[1][primary]" checked="checked" />Yes</label>
    <label class="btn btn-primary"><input type="radio" id="primary-1-0" value="0" name="address[1][primary]" />No</label>
</div>
<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary"><input type="radio" id="primary-2-1" value="1" name="address[2][primary]" />Yes</label>
    <label class="btn btn-primary active"><input type="radio" id="primary-2-0" value="0" name="address[2][primary]" checked="checked" />No</label>
</div>

and most recent of the jQuery I have tried

$("input[type=radio]").change(function()
{
    $("input[type=radio]:checked").not(this).prop("checked", false);
});

This is using bootstrap toggle buttons for display... so behind the scenes it does something with class as well (making the label active or not active if the radio to that label is selected)

on input a value of 1 or 0 must be selected for each group or it will throw an error... while it is working now, we can have multiple 1 values submitted, which is not optimal

Answer 1

based on the work of @billyonecan

$('input[type="radio"][value="1"]').on('change', function() {
   var $x = $('input[name="' + this.name + '"]');
   $('input[type="radio"][value="0"]').not( $x ).prop('checked', true).parent().addClass('active');
   $('input[type="radio"][value="1"]').not( $x ).parent().removeClass('active');
}).filter(':checked').change(); 

Thanks for pointing me in the right direction

Fiddle

Answer 2

it is not possible to send value of unchecked radio to server. so the trick is to have a hidden field corresponding to each radio and send it's value to server rather then radio/check-box. please have an idea from code given blow , it is not tested .

<div class="btn-group" data-toggle="buttons">
    <input type="hidden" id="primary-hidden-0" value="1" name="address[0][primary]" />
    <label class="btn btn-primary"><input type="radio" id="primary-0-1" value="1" />Yes</label>
    <label class="btn btn-primary active"><input type="radio" id="primary-0-0" value="0" checked="checked" />No</label>
</div>
<div class="btn-group" data-toggle="buttons">
    <input type="hidden" id="primary-hidden-1" value="1" name="address[1][primary]"/>
    <label class="btn btn-primary active">
    <input type="radio" id="primary-1-1" value="1"  checked="checked" />Yes</label>
    <label class="btn btn-primary"><input type="radio" id="primary-1-0" value="0"/>No</label>
</div>
<div class="btn-group" data-toggle="buttons">
    <input type="hidden" id="primary-hidden-2" value="1"  name="address[2][primary]"/>
    <label class="btn btn-primary"><input type="radio" id="primary-2-1" value="1" />Yes</label>
    <label class="btn btn-primary active"><input type="radio" id="primary-2-0" value="0" checked="checked" />No</label>
</div>


$("input[type=radio]:checked").each(function(){
      $(this).prevAll("input[type=hidden]").val($(this).val());
});

$("input[type=radio]").change(function()
{
    $(this).prevAll("input[type=hidden]").val($(this).val());
    $("input[type=radio]:checked").not(this).each(){
       $(this).prop("checked", false);
       $(this).prevAll("input[type=hidden]").val($(this).val());
    });
});