如何使用值设置一组复选框

How do I set a group of checkboxes using values?

本文关键字：一组 复选框 何使用 设置      更新时间：2023-09-26

所以我有一组复选框，例如：

<input type="checkbox" id="cbl1" name="cbl" value="1" />
<input type="checkbox" id="cbl2" name="cbl" value="2" />
<input type="checkbox" id="cbl3" name="cbl" value="3" />
<input type="checkbox" id="cbl4" name="cbl" value="4" />
<input type="checkbox" id="cbl5" name="cbl" value="5" />
<input type="checkbox" id="cbl6" name="cbl" value="6" />
<input type="checkbox" id="cbl7" name="cbl" value="7" />
<input type="checkbox" id="cbl8" name="cbl" value="8" />

现在我有了一组值：

var values = ["2", "4", "7", "8"];

现在，我如何将我的一组复选框变成这样：

<input type="checkbox" id="cbl1" name="cbl" value="1" />
<input type="checkbox" id="cbl2" name="cbl" value="2" checked="checked" />
<input type="checkbox" id="cbl3" name="cbl" value="3" />
<input type="checkbox" id="cbl4" name="cbl" value="4" checked="checked" />
<input type="checkbox" id="cbl5" name="cbl" value="5" />
<input type="checkbox" id="cbl6" name="cbl" value="6" />
<input type="checkbox" id="cbl7" name="cbl" value="7" checked="checked" />
<input type="checkbox" id="cbl8" name="cbl" value="8" checked="checked" />

我必须使用两个for循环才能做到这一点吗？在纯javascript或jquery中，有没有一种方法不需要循环两次？

API文档演示

var values = ["2", "4", "7", "8"];
$('input[name="cbl"]').val(values)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="cbl1" name="cbl" value="1" />
<input type="checkbox" id="cbl2" name="cbl" value="2" />
<input type="checkbox" id="cbl3" name="cbl" value="3" />
<input type="checkbox" id="cbl4" name="cbl" value="4" />
<input type="checkbox" id="cbl5" name="cbl" value="5" />
<input type="checkbox" id="cbl6" name="cbl" value="6" />
<input type="checkbox" id="cbl7" name="cbl" value="7" />
<input type="checkbox" id="cbl8" name="cbl" value="8" />

从数组中创建一个选择器，并检查所有

$( '#cbl' + values.join(', #cbl') ).prop('checked', true);

FIDDLE

这是使用ID，因为这是比值更好的选择元素的方法，如果你仍然想使用值，你可以使用相同的概念

$( '[value="' + values.join('"], [value="') + '"]').prop('checked', true);

FIDDLE

或者你可以过滤

$('input[type="checkbox"]').filter(function() {
    return $.inArray(this.value, values) != -1;
}).prop('checked', true);
相关文章：