jQuery复选框使用数组检查 [英] jquery checkbox check using arrays
问题描述
我正在尝试使用多个选择选项在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'];
});
});
关于， 贝斯米尔
给男人一条鱼...
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"相关联的所有值，则返回"0". (这表示我们$.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
I was trying to check check-boxes using array in jquery using multiple select options If, lets say Option 1 and Option 3 is clicked, checkboxes which id is set in array will become checked and if removed unchecked.
<select id="lab_abbr" multiple >
<option value="o1">Option 1</option>
<option value="o2">Option 2</option>
<option value="o3">Option 3</option>
</select>
and checkboxes
<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" />
and last 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'];
});
});
Regards, Besmir
Give a man fish...
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);
});
});
Demo: http://jsbin.com/onapem/edit#javascript,html
Teach a man to fish...
Let's break it down now and see what each part does.
We start off by creating an object which will serve as a sort of associative array. Essentially, we get to associate one value to another. In this case, we want to associate the value of the selected option (be it "o1" or "o2"), to a series of checkboxes:
var mapping = { 'o1' : ['lab_one', 'lab_three'] };
Next we bind our logic to the change event of our select menu using the $.on method:
$("#lab_abbr").on("change", function(){
/* React to the change */
});
Anytime this menu undergoes a change, we want to cycle over its options. We're not yet worried about whether or not the options are selected - we just want to access every one of them. We do so by using the $.each iterator method:
$.each( this.options, function(){
/* Do something with each individual <option /> */
});
Within this block, we want to gather up those checkbox id's that are associated with this option value. For instance, if we wanted all values associated with "o1" (which would represent the first option through our $.each, we could do this:
alert( mapping['o1'] ); // ['lab_one', 'lab_three']
We're going t do this dynamically though. Within our $.each, the keyword this always refers to the current <option /> being handled. We can use its value to look up any fields associated with it:
mapping[ this.value ]; // returns an array
We would like to convert this into a CSS selector to pass jQuery, so we use the .join() method on the returned array to create a string:
mapping[ this.value ].join(", #");
The .join() method accepts a string to add between each value. In the case above, our first iteration through will return in the following string:
"lab_one, #lab_three"
Note the , # seperating the two values from the array. We need another # in the front of this string so that #lab_one will also be selected. This was solved by concatenating the character onto the resulting string:
$( "#" + mapping[ this.value ].join(", #") )
Lastly, we call the $.prop() method which allows us to set a property value on the element. We're going to set the checked property.
With the $.prop() method, you pass in the property you would like to set, and the value you would like to set it to.
$( /*...*/ ).prop("checked", this.selected );
Remember, this represents whichever <option /> we're currently accessing in this iteration of $.each(). The <option /> has a native property called selected which returns either true or false - indicating if it's selected or not. We use this to tell jQuery what the value of "checked" should be.
So if the option being handled is selected, so will each one of the checkboxes it is associated with. And likewise, if the option being handled is not selected, neither will the checkboxes it is associated with.
Want a smaller fish?
If you wanted to shorten this all a bit more, you could store the jQuery selector directly in the object:
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 );
});
});
Demo: http://jsbin.com/onapem/2/edit
这篇关于jQuery复选框使用数组检查的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
