基于数据库值选中的复选框

Question

我有一个动态复选框。所有复选框都有动态 ID，如下面的代码所示。此复选框是使用 "TABLE1" 绑定的。

<input type="checkbox" class="level-one" id="22" name="chkRoles" value="RecordOne">
<input type="checkbox" class="level-one" id="22" name="chkRoles" value="Recordtwo">
<input type="checkbox" class="level-one" id="19" name="chkRoles" value="Recordthree">
<input type="checkbox" class="level-one" id="30" name="chkRoles" value="RecordFour">
<input type="checkbox" class="level-one" id="35" name="chkRoles" value="RecordFive">
<input type="checkbox" class="level-one" id="25" name="chkRoles" value="RecordSix">

我正在从其他 TABLE 中获取数据，比如说 TABLE2。其中包含 value19,22,25。

var sectionLevelOne = "19,22,25";
var levelArrayOne = sectionLevelOne.split(",");
$.each(levelArrayOne, function (index, value){
       $("chkRoles_"+id).prop("checked",true);
});

我想检查那些ID为“19,22,25”的CHECKBOX。

Answer 1

首先请注意，您有多个具有相同id 的元素。这是无效的，因为id 属性必须 是唯一的。如果您无法做到这一点，请使用data-id 在元素上存储自定义数据。

除此之外，您的代码没有根据您显示的 HTML 构建有效的id 选择器，因为chkRoles 是类，而不是id。您还可以简化逻辑。试试这个：

"19,22,25".split(',').forEach(id => {
  $(`[data-id="${id}"]`).prop('checked', true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="level-one" data-id="22" name="chkRoles" value="RecordOne">
<input type="checkbox" class="level-one" data-id="22" name="chkRoles" value="Recordtwo">
<input type="checkbox" class="level-one" data-id="19" name="chkRoles" value="Recordthree">
<input type="checkbox" class="level-one" data-id="30" name="chkRoles" value="RecordFour">
<input type="checkbox" class="level-one" data-id="35" name="chkRoles" value="RecordFive">
<input type="checkbox" class="level-one" data-id="25" name="chkRoles" value="RecordSix">