Question

我有一些复选框，我将值转换为数组：

<ul>
    <li><input type="checkbox" name="daily[]" value="0"></li>
    <li><input type="checkbox" name="daily[]" value="1"></li>
    <li><input type="checkbox" name="daily[]" value="2"></li>
    <li><input type="checkbox" name="daily[]" value="3"></li>
    <li><input type="checkbox" name="daily[]" value="4"></li>
</ul>

我正在使用此函数将值输入数组：

var days = $('input[name^='+daily+']:checked').map(function(){
  return parseInt($(this).val(),10);
}).get();

这很好用.. 但是现在我想反过来。为了填写编辑表单，我想在拥有数组时检查复选框。我怎么能这么做呢？

Answer 1

你可以这样做，

var arr = ["2","3","4"];
var elems = $('input[name^='+daily+']');
arr.forEach(function(val){
 elems.filter("[value="+ val +"]").prop("checked",true);
});

DEMO

需要注意的要点：

尝试在迭代阶段之外缓存您的选择器提高绩效。
迭代所有元素并检查其值当你有100+时，数组会导致严重的性能缺陷元素和数组大小为2。

Answer 2

迭代数组 - 为checkbox元素创建一个选择器 - 验证元素是否存在 - 设置checked属性：

for (var i = 0; i < days.length; i++) {
    var value = days[i];
    var selector = 'ul li input[value="' + value + '"]')
    var elem = $(selector);
    if (elem) {
        elem.prop("checked", true);
    }
}

或者：

$('input[name^='+daily+']').prop("checked", function() {
    return days.indexOf(this.value) > -1;
});

Answer 3

你可以这样做：

var days = [0, 2, 3];
var $checkboxes = $('input[name^=daily]');

days.forEach(function(day) {
    $checkboxes.get(day).checked = true;
});

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<ul>
    <li><input type="checkbox" name="daily[]" value="0"></li>
    <li><input type="checkbox" name="daily[]" value="1"></li>
    <li><input type="checkbox" name="daily[]" value="2"></li>
    <li><input type="checkbox" name="daily[]" value="3"></li>
    <li><input type="checkbox" name="daily[]" value="4"></li>
</ul>

（另见this Fiddle）

使用数组中的值填充复选框

3 个答案:

DEMO