当复选框被一一选中时，jquery select multiple="multiple" with custom attributes答案

【问题标题】：jquery select multiple="multiple" with custom attributes when checkbox is checked one by one当复选框被一一选中时，jquery select multiple="multiple" with custom attributes
【发布时间】：2014-05-27 19:12:29
【问题描述】：

我的小提琴http://jsfiddle.net/terveg/MbHVB/4/ 我的 HTML 代码是：

MULTIPLE CHECKBOXES:
<div class="cck-fl">
    <input type="checkbox" id="user_chosen_groups0" name="user_chosen_groups[]" value="10" checked="checked" class="checkbox validate[require[required_user_chosen_groups]]" size="1" data="49" groups="lovers">
    <label for="user_chosen_groups0">group one</label>
    <input type="checkbox" id="user_chosen_groups1" name="user_chosen_groups[]" value="11" class="checkbox validate[require[required_user_chosen_groups]]" size="1" data="48" groups="breeders">
    <label for="user_chosen_groups1">group two</label>
    <input type="checkbox" id="user_chosen_groups2" name="user_chosen_groups[]" value="12" class="checkbox validate[require[required_user_chosen_groups]]" size="1" data="58" groups="shopers">
    <label for="user_chosen_groups2">group three</label>
</div>
<br />
<br/>
MULTIPLE SELECT:
<div id="cck1r_form_dash" class="cck_form cck_form_select_multiple">
    <select id="#dash" name="dash[]" class="inputbox select" size="10" multiple="multiple">
        <option value="49">group 1 match checkbox-value 10 + value 49</option>
        <option value="48">group 2 match checkbox-value 11 + value 48</option>
        <option value="58">group 3 match checkbox-value 12 + value 58</option>
    </select>
</div>

我正在尝试将多个复选框与多选输入相匹配。当我选中“第一组”时，必须选择“第一组匹配复选框值 10 + 值 49” 并循环所有选项。从逻辑上讲，如果未选中复选框，则相关的选择选项也必须“未选中”。此外，我在复选框字段中默认选中了一个选项，因此在加载页面时也应该检查 select 中的相关选项。顺便说一句，我的复选框也有自定义属性 data="" ......也许使用它是个好主意？

我尝试了大约 5 种不同的解决方案，但没有一个有效。请帮帮我

【问题讨论】：

请您不编辑您的问题以使其更难阅读吗？尽管您可能会觉得编辑您的问题（以清楚地显示代码）打扰我，但我真的很想提供帮助。

标签： jquery checkbox match multi-select

【解决方案1】：

我得到了它的工作，但我不明白你为什么需要这样做？

var $selectOptions = $('#dash option');

$('input[type=checkbox]').on('change', function () {

    var $checkbox = $(this),
        checked = $checkbox.prop('checked');

    $selectOptions.filter(function () {
      var $option = $(this);
      return $option.val() === $checkbox.attr('data');
    }).prop('selected', checked);

}).trigger('change');

这是一个小演示：http://jsfiddle.net/MbHVB/8/

【讨论】：