jQuery:选中/取消选中复选框时更改下拉选择

Question

我有这个表格:

<input type="checkbox" value="First" />First
<input type="checkbox" value="Second" />Second
<input type="checkbox" value="Third" />Third

<select name="first-drop">
    <option value="---">---</option>
    <option value="Option1">Option1</option>
    <option value="Option2">Option2</option>
</select>

​有没有办法(使用 JS/jQuery)我可以在 First 时将 first-drop 的值更改为 --- > 复选框未选中？

Answer 1

$('input[type="checkbox"][value="First"]').change(function (){
    $('select[name="first-drop"]').toggle();
});​

LIVE DEMO

请注意，我修复了您的标记:

<input type="checkbox" value="First" checked="checked" >First
<input type="checkbox" value="Second" />Second
<input type="checkbox" value="Third" />Third

<select name="first-drop">
    <option value="">---</option>
    <option value="Option1">Option1</option>
    <option value="Option2">Option2</option>
</select>​

<小时/>

更新:

你现在想要的是:

$('input[type="checkbox"][value="First"]').change(function() {
    if (!this.checked) {
        $('select[name="first-drop"] option:first').prop('selected', 'selected');
    }
});

<强> ​LIVE DEMO

如果你给你的 DOM 元素 id，它可以很简单:

$('#first').change(function() {
    if (!this.checked) 
        $('#nothing').prop('selected', 'selected');
});

更新的 DOM:

<input type="checkbox" value="First" id="first" >First
<input type="checkbox" value="Second">Second
<input type="checkbox" value="Third">Third

<select name="first-drop">
    <option value="" id="nothing" >---</option>
    <option value="Option1" >Option1</option>
    <option value="Option2">Option2</option>
</select>​

<强> LIVE DEMO