Question

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

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

'P.J。加拉格尔的Drummoyne'检查input#drummoyne-list.checkbox
'P.J。加拉格尔的Parramatta'检查input#parramatta-list.checkbox
'北悉尼联合酒店'支票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;
  });
});

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...
    }
}

Answer 3

似乎有点多余的构造你的表单输入 - 只是有一个下拉列表，然后直接在下面的复选框说“订阅时事通讯”？您可以在服务器上推断出正确的订阅。

这样，根本不需要jQuery代码。

使用jQuery选择基于Select Value的复选框

3 个答案: