JQueryUI單選按鈕不選擇多個部分

Question

在我的html頁面我有兩個部分，每個部分都是獨立的。當我選擇檢查1然後檢查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>