根据数据库值选中复选框

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。其中包含值 19,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 是 class，而不是 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">

根据数据库值选中复选框

Checkbox checked based on Databased value

javascript

checkbox

jquery

jquery-ui