我想通过匹配来自 mongo 数据库的值来选中复选框

Question

这段代码写在车把中，我正在使用带有 nodejs 的 mongodb，我想编辑管理配置文件，我需要在其中选择值复选框，我们将从数据库中获取需要比较并选中复选框

<pre>
<div class="form-group">
<label class="control-label text-bold mr-6" style=" ">User Management
<input type="checkbox" name="role" value="User Management" class="chk" />
</label>
<label class="control-label text-bold mr-6" style=" ">Payment Management
<input type="checkbox" name="role" value="Payment Management" class="chk" />
</label>
<label class="control-label text-bold mr-6" style=" ">Booking Management
<input type="checkbox" name="role" value="Booking Management" class="chk" />
</label>
<label class="control-label text-bold mr-6" style=" ">Cancellation Management
<input type="checkbox" name="role" value="Cancellation Management" class="chk" />
</label>
<label class="control-label text-bold mr-6" style=" ">Club Management
<input type="checkbox" name="role" value="Club Management" class="chk" />
</label>
<label class="control-label text-bold mr-6" style=" ">Report Management
<input type="checkbox" name="role" value="Report Management" class="chk" />
</label>
<label class="control-label text-bold mr-6" style=" ">Static Pages Management
<input type="checkbox" name="role" value="Static Pages Management" class="chk"  />
</label>
</div>
</pre>

i am providing my front end side in which i want these checkboxes to be checked the selected values is shwoing in the role box

Answer 1

1 - 所以， 首先从 mongo DB 加载数据，等待它加载并将 props 添加到输入元素：

<input [...other_props] checked={mongo_db_data_field_value} />

如果你不知道如何动态放置值，

使用 js createElement('html_element_tag_name') 并设置您需要的所有道具，例如：

var label1 = document.createElement('label');
...set the props of the label
var input1 = document.createElement('input');
...set other props of the input
input1.checked = mongoData.field_field_value;

并将您的标签和输入分组在另一个标签（如 div）中，为 div 提供一个 ID 属性，然后：

document.getElementById('div_parent_id').innerHtml = '';
document.getElementById('div_parent_id').appendChild(label1);
document.getElementById('div_parent_id').appendChild(input1);

或者为了更少的代码：

2 - 为您的输入提供一个 id 并执行此操作：

document.getElementById('input_id').checked = mongo_data_field_value