jquery复选框检查使用数组

Question

我试着在jquery中使用多个选择选项来检查复选框，假设选项1和选项3被点击，那么在数组中设置id的复选框将被选中，如果被移除，将被取消选中。

<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" />

和最后的jquery

$(document).ready(function() {
    $("#lab_abbr").live("change", function(e)  {
        var o1 = ['lab_one', 'lab_three'];
        var o2 = ['lab_two', 'lab_six'];
        var o3 = ['lab_four, 'lab_five'];


    });
});

致敬，贝斯密尔

Answer 1

给人鱼..。

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

演示：http://jsbin.com/onapem/edit#javascript,html

教人钓鱼..。

现在让我们分解一下，看看每个部分都做了些什么。

我们首先创建一个对象，它将用作一种关联数组。本质上，我们可以将一个值与另一个值相关联。在本例中，我们希望将所选选项的值( "o1“或"o2")与一系列复选框相关联：

var mapping = { 'o1' : ['lab_one', 'lab_three'] };

接下来，我们使用$.on方法将逻辑绑定到select菜单的change事件：

$("#lab_abbr").on("change", function(){
  /* React to the change */
});

每当此菜单发生变化时，我们都希望在其选项上循环。我们还不担心选项是否被选中--我们只想访问每一个选项。为此，我们使用$.each迭代器方法：

$.each( this.options, function(){
  /* Do something with each individual <option /> */
});

在此块中，我们希望收集与此选项值相关联的复选框id。例如，如果我们想要所有与"o1“相关的值(这将代表通过我们的$.each的第一个选项)，我们可以这样做：

alert( mapping['o1'] ); // ['lab_one', 'lab_three']

我们将动态地做这件事。在我们的$.each中，关键字this总是指正在处理的当前<option />。我们可以使用它的值来查找与其关联的任何字段：

mapping[ this.value ]; // returns an array

我们想把它转换成一个CSS选择器来传递jQuery，所以我们在返回的数组上使用.join()方法来创建一个字符串：

mapping[ this.value ].join(", #");

.join()方法接受要在每个值之间添加的字符串。在上面的例子中，我们的第一次迭代将在下面的字符串中返回：

"lab_one, #lab_three"

注意将两个值从数组中分离出来的, #。我们在这个字符串的前面需要另一个#，这样#lab_one也会被选中。这是通过将字符连接到结果字符串来解决的：

$( "#" + mapping[ this.value ].join(", #") )

最后，我们调用$.prop()方法，该方法允许我们在元素上设置属性值。我们将设置checked属性。

使用$.prop()方法，您可以传入要设置的属性和要设置的值。

$( /*...*/ ).prop("checked", this.selected );

请记住，this表示我们当前在此$.each()迭代中访问的任何<option />。<option />有一个名为selected的原生属性，它返回true或false -指示它是否被选中。我们用它来告诉jQuery "checked"的值应该是什么。

因此，如果正在处理的选项是selected，那么与之关联的每个复选框也是如此。同样，如果未选择正在处理的选项，则与其关联的复选框也不会被选中。

想要条小一点的鱼吗？

如果你想缩短这一切，你可以将jQuery选择器直接存储在对象中：

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 ] ).prop( "checked", this.selected ); 
  });
});

演示：http://jsbin.com/onapem/2/edit

Answer 2

你需要将var定义为一个对象，然后简单地迭代选择并选中复选框。

$(document).ready(function() {
    var selections = {
                  o1: ['lab_one', 'lab_three'],
                  o2: ['lab_two', 'lab_six'],
                  o3: ['lab_four', 'lab_five']
    };

    var $checkbox = $(':checkbox');

    $("#lab_abbr").on("change", function(e)  {

        $.each ($checkbox, function (i, ck) { //uncheck all checkbox
            this.checked = false;
        });

        $.each($(this).val(), function (idx, val) { //iterate over selected options
            $.each (selections[val], function (i, v) { //iterate over the selections
                $('#' + v).prop('checked', true); //set the checkbox
            });        
        });        
    });
});