用数组中的值填充复选框

Filling checkboxes with values from an array

本文关键字：填充 复选框 数组      更新时间：2023-09-26

我有一些复选框，我正在将值放入数组中：

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

这运作良好..但现在我想做相反的事情。要填写编辑表单，我想在拥有数组时选中复选框。我怎样才能以一种好的方式做到这一点？

迭代数组 - 为复选框元素创建一个选择器 - 验证元素是否存在 - 设置 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;
});
你可以

这样做，

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

演示

注意事项：

  • 尝试在迭代阶段之外缓存您的选择器，这将提高性能。

  • 遍历所有元素并根据当您有 100+ 时，阵列会导致严重的性能缺陷元素，数组大小为 2。

你可以

这样做：

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>

（另见这首小提琴）

相关文章：