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'];


    });
});

此致 Besmir

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'] };

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

$("#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表示我们在<option />的此次迭代中当前正在访问的$.each()。 <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定义为对象，然后简单地迭代选择并选中复选框。见下文，

DEMO

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

jquery复选框使用数组检查

2 个答案:

给一个男人钓鱼......

教导一个人钓鱼......

想要一条小鱼？