javascript - JQueryUI 单选按钮集不选择多个部分

Question

在我的 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>

JS

$(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');
        });
   }); 
});

不确定我哪里出错了，这是我的 fiddle http://jsfiddle.net/surysharma/waodj7n5/

Answer 1

您无法选择多个具有相同名称属性的 radio 。您需要单独命名您的组。

JSFiddle

<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>