Javascript 基于使用jQuery选择值选中复选框

我想要一个小的jQuery脚本，它将根据在选择元素输入中选择的值来选中相应的复选框

例如，如果在

select#CAT#u Custom_70944

中选择了值“p.J.Gallagher的Drummoyne”，则选中

input#Drummoyne列表。复选框

。选择列表中的所有选项也是如此：

• “P.J.Gallagher的Drummoyne”检查

  input#Drummoyne列表。复选框

• “P.J.Gallagher的Parramatta”检查

  输入#Parramatta列表。复选框

• “北悉尼联合酒店”选中

  输入#联合列表。复选框

以前有人见过这样的事情吗？示例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>

首选GMH酒店*

-请选择-
P.J.加拉格尔德拉姆莫因
P.J.加拉赫的帕拉马塔
北悉尼联合酒店
订阅：P.J.Gallagher的Drummoyne时事通讯
订阅：P.J.Gallagher的Parramatta通讯
订阅：联合酒店通讯

创建一个由“选择”下拉菜单上的“更改”事件触发的功能，该功能检测所选值并更新正确的框

它看起来像这样

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

---

像这样构造表单输入似乎有点多余-如果只在下拉列表中添加一个复选框，然后直接在下面显示“订阅时事通讯”，不是更容易吗？您可以推断服务器上的正确订阅

---

这样，根本不需要jQuery代码

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

---

如果使用DOM元素本身，则设置或清除复选框会更容易（更快），因此代码中的最后一行将变成$（“.item:checkbox”）[this.selectedIndex-1].checked=true；