Question

如何使用jQuery设置单选按钮的预设？

<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的处理程序内输入每个预设。如果您需要插入新的预设，只需添加带有新选择器的选项见jsfiddle：http://jsfiddle.net/8f7Nw/2/

Answer 2

您可能希望使用下拉列表选择广播选项

试试这个：

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

您的fiddle updated

使用jQuery预设单选按钮

2 个答案: