Question

这是关于本网站上帖子的问题...... jquery checkbox check using arrays

有http://jsbin.com/onapem/2/edit的演示链接，代码是......

<select id="lab_abbr" multiple >
  <option value="o1">Option 1</option>
  <option value="o2">Option 2</option>
  <option value="o3">Option 3</option>
</select>

<input type="checkbox" name="lab[one]" id="lab_one" />
<input type="checkbox" name="lab[two]" id="lab_two" />
<input type="checkbox" name="lab[three]" id="lab_three" />
<input type="checkbox" name="lab[four]" id="lab_four" />
<input type="checkbox" name="lab[five]" id="lab_five" />
<input type="checkbox" name="lab[six]" id="lab_six" />

JS

var mapping = { 'o1' : ['lab_one', 'lab_three'], 'o2' : ['lab_two', 'lab_six'], 
                'o3' : ['lab_four', 'lab_five'] };

$("#lab_abbr").on("change", function () {
  $.each( this.options, function () {
    $( "#" + mapping[ this.value ].join(", #") ).prop("checked", this.selected); 
  });
});

我想使用此功能，但您只能映射一次值。因此，如果我想将'lab_one'映射到o3以及o1，则无法完成。它只是使用最后一种情况，因此具有将'lab_one'从o1中取出的效果。这样做会很好。例如，我希望，当点击一名足球运动员让他得分的球队进行检查时。有没有办法多次赋值？

非常感谢任何帮助。

Answer 1

我只想将您想要的复选框放入附加到每个选项的数据属性中，然后根据该选项选中或取消选中复选框。

HTML：

<select id="lab_abbr" multiple >
  <option value="o1" data-elem="one, three"      >Option 1</option>
  <option value="o2" data-elem="two, six"        >Option 2</option>
  <option value="o3" data-elem="one, four, five" >Option 3</option>
</select>

<input type="checkbox" name="lab[one]"   id="lab_one"   />
<input type="checkbox" name="lab[two]"   id="lab_two"   />
<input type="checkbox" name="lab[three]" id="lab_three" />
<input type="checkbox" name="lab[four]"  id="lab_four"  />
<input type="checkbox" name="lab[five]"  id="lab_five"  />
<input type="checkbox" name="lab[six]"   id="lab_six"   />

JS

$("#lab_abbr").on("change", function () {
    var elems = $.map($('option:selected', this).data('elem').split(','), function(x) {
         return $.trim(x);
    });
    $('[name^="lab\\["]').prop('checked', function() {
        return $.inArray(this.id.replace('lab_',''), elems) != -1;
    });
});

FIDDLE

jquery中的映射值必须是唯一的

1 个答案: