Javascript JQueryUI收音机按钮设置不选择多个区段

在我的html页面中，我有两个部分，每个部分相互独立。当我选择Check1然后选择check2时，选项2将取消选中，而只有选项4被选中。我希望选择2和选择4都被选中

HTML

    <div id="radio-gp1">
    <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
    <input type="radio" id="radio2" name="radio"/><label for="radio2">Choice 2</label>
</div>

<div id="radio-gp2">
    <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
    <input type="radio" id="radio4" name="radio" /><label for="radio4">Choice 4</label>
</div>

<button id="check1">Check1</button>
<button id="check2">Check2</button>

---

不确定我哪里出错了，这是我的小提琴

您不能选择多个具有相同名称属性的收音机。您需要分别命名您的组

选择1
选择2
选择3
选择4

单选按钮按名称属性分组。

$(function() {
    $( "#radio-gp1" ).buttonset();
    $( "#radio-gp2" ).buttonset();
    $('#check1').click(function() {
        $('#radio-gp1 input').each(function(){
            $(this).attr('checked','checked');                   
            $( "#radio-gp1" ).buttonset('refresh');
        });
   });
   $('#check2').click(function() {
        $('#radio-gp2 input').each(function(){
            $(this).attr('checked','checked');                   
            $( "#radio-gp2" ).buttonset('refresh');
        });
   }); 
});

<div id="radio-gp1">
    <input type="radio" id="radio1" name="radiogp1" /><label for="radio1">Choice 1</label>
    <input type="radio" id="radio2" name="radiogp1"/><label for="radio2">Choice 2</label>
</div>

<div id="radio-gp2">
    <input type="radio" id="radio3" name="radiogp2" /><label for="radio3">Choice 3</label>
    <input type="radio" id="radio4" name="radiogp2" /><label for="radio4">Choice 4</label>
</div>