Question

在我的html页面中，我有两个部分，每个部分都独立于另一个部分。当我选择Check1然后检查2时，选择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');
        });
   }); 
});

不知道我哪里出错了，这是我的小提琴http://jsfiddle.net/surysharma/waodj7n5/

Answer 1

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

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>

JQuery UI单选按钮组不选择多个部分

1 个答案: