使用jQuery預設單選按鈕

Question

如何使用jQuery設置單選按鈕的預設？

下面是一個簡單的例子：http://jsfiddle.net/EpQgr/

<select> 
    <option>option 1</option> 
    <option>option 2</option> 
</select> 

<div> 
    <input id="radio1_0_0" type="radio" name="radio1" value="1" />x 
    <input id="radio1_0_1" type="radio" name="radio1" value="2" />y 
    <input id="radio1_0_2" type="radio" name="radio1" value="3" />z 
</div> 
<div> 
    <input id="radio2_0_0" type="radio" name="radio2" value="1" />x 
    <input id="radio2_0_1" type="radio" name="radio2" value="2" />y 
    <input id="radio2_0_2" type="radio" name="radio2" value="3" />z 
</div> 

預設選項應該是這樣的：

//option 1 
$("#radio1_0_1, #radio2_0_2").prop("checked",true); 

//option 2 
$("div input:first-child").prop("checked",true); 

Answer 1

改變你的HTML代碼是這樣的：

<select> 
    <option value="">Choose a preset</option>  
    <option value="#radio1_0_1, #radio2_0_2">option 1</option> 
    <option value="#radio1_0_0, #radio2_0_0">option 2</option> 
</select> 

和JS

$('select').on('change', function() { 
    var v = $(this).val(); 
    if ($(v).length) { 
     $(v).prop("checked", true); 
    } 
}); 

要檢查的元素存儲在每個選項的value屬性中。
該解決方案避免了必須在select的處理程序中輸入每個預設。 http://jsfiddle.net/8f7Nw/2/

Answer 2

你可能想的dropdow被用來選擇無線選項

試試這個：

$("select").bind("change", function() { 

    // un select all 
    $("input[type=radio]").prop("checked",false); 

    if($(this).val() === "option 1") { 
     //option 1 
     $("#radio1_0_1, #radio2_0_2").prop("checked",true); 
    } 

    if($(this).val() === "option 2") { 
     //option 2 
     $("div input:first-child").prop("checked",true);   
    } 
}); 

如果你需要插入一個新的預設只是一個新的選擇
看到的jsfiddle添加選項

你的fiddle updated