使用jQuery根据选择值选中复选框

Question

我需要一个小型的jQuery脚本，它将根据选择的值来检查相应的复选框。

例如：如果在中选择了“P.J. Gallagher's Drummoyne”的值，则选中。对于选择列表中的所有选项都是如此：

• “P.J. Gallagher's Drummoyne”选中。
• “P.J. Gallagher's Parramatta”选中。
• “Union Hotel North Sydney”选中。

有人实现过类似的功能吗？以下为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>

- mattt

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;
  });
});

- Jose Basilio

---

如果使用DOM元素本身来设置或清除复选框，那么这将变得更加容易（和快速），因此您代码中的最后一行应该是$(".item :checkbox")[this.selectedIndex-1].checked = true; - Philippe Leybaert

Answer 2

创建一个函数，该函数由选择下拉菜单上的“更改”事件触发，检测所选值并更新正确的框。它应该看起来像这样。

它大致如下。

$("select#CAT_Custom_70944").change( function() {
    var val = this.value;
    if (val == "P.J. Gallagher's Drummoyne") {
        // Code to check correct box...
    } else if (val == "P.J. Gallagher's Parramatta") {
        // Code to check correct box...
    } else {
        // Code to check correct box...
    }
}

- Marquis Wang

Answer 3

这样构建表单输入似乎有点冗余 - 直接使用下拉菜单，然后在其下方直接放置一个复选框，上面写着“订阅通讯”不是更容易吗？你可以在服务器端推断出正确的订阅方式。

这样，就完全不需要任何jQuery代码了。

- Sam