Радиоустройства JQueryUI не выбирают многоразмерные секции

Question

n my html page У меня есть два раздела, каждый из которых независим от другого. Когда я выбираю 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'); 
     }); 
    }); 
}); 

Не знаете, где я неправильно, вот моя скрипка 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>