javascript - 使用 jQuery 检查基于选择值的复选框

Question

我正在寻找一个小的 jQuery 脚本，该脚本将根据在 Select 元素输入中选择的值来选中相应的复选框。

例如。如果值 'P.J.在 select#CAT_Custom_70944 中选择 Gallagher's Drummoyne'，然后选中 input#drummoyne-list.checkbox。选择列表中的所有选项也是如此:

• 'P.J. Gallagher 的 Drummoyne' 检查 input#drummoyne-list.checkbox
• 'P.J. Gallagher 的 Parramatta' 检查 input#parramatta-list.checkbox
• 'Union Hotel North Sydney' 选中 input#union-list.checkbox

有没有人以前见过这样的事情？示例 HTML 代码:

<div class="item">
    <label for="CAT_Custom_70944">Preferred GMH Hotel <span class="req">*</span></label><br />
    <select name="CAT_Custom_70944" id="CAT_Custom_70944" class="cat_dropdown">
        <option value=" " selected="selected">- Please Select -</option>
            <option value="P.J. Gallagher's Drummoyne">P.J. Gallagher's Drummoyne</option>
        <option value="P.J. Gallagher's Parramatta">P.J. Gallagher's Parramatta</option>
        <option value="Union Hotel North Sydney">Union Hotel North Sydney</option>
    </select>
</div>
<div class="item">
    <input type="checkbox" id="drummoyne-list" class="checkbox" name="CampaignList_20320" /> <label>Subscribe to: P.J. Gallagher's Drummoyne Newsletter</label>
</div>
<div class="item">
    <input type="checkbox" id="parramatta-list" class="checkbox" name="CampaignList_20321" /> <label>Subscribe to: P.J. Gallagher's Parramatta Newsletter</label>
</div>
<div class="item">
    <input type="checkbox" id="union-list" class="checkbox" name="CampaignList_20322" /> <label>Subscribe to: The Union Hotel Newsletter</label>
</div>

Answer 1

当有一个可遵循的模式时，jQuery 工作得很好。例如，如果下拉列表中的选项值很简单，如“drummoyne”、“parramatta”和“union”，则可以很容易地与复选框的 ID 匹配。

在没有这种模式的情况下，我创建了下面的代码，根据它们出现的顺序匹配它们。

$(function(){
  $('select.cat_dropdown').change(function(){
     $('.item :checkbox').removeAttr('checked'); //uncheck the other boxes
     $('.item :checkbox')[this.selectedIndex-1].checked = true;
  });
});