1

我试图使用多个选择选项在 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'];


    });
});

问候，贝斯米尔

4

2 回答 2

6

给男人鱼...

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

不过，我们不会动态地执行此操作。在 our$.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

于 2012-05-09T21:26:32.837 回答
0

您需要将var's 定义为一个对象，然后简单地遍历选择并选中复选框。见下文，

演示

$(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
            });        
        });        
    });
});
于 2012-05-09T21:09:23.407 回答