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

Posted 2023-03-08

【中文标题】我想通过匹配来自 mongo 数据库的值来选中复选框

【英文标题】：I want to checked the checkbox by matching the value from mongo database

【发布时间】：2021-11-20 05:11:02

【问题描述】：

这段代码写在车把中，我正在使用带有 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

【参考方案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

【讨论】：

我没听懂你能不能请用我的代码做这个解决方案我试图用 mongo 参数添加检查字段但是现在所有的复选框都被选中了请用我的代码这样做这样会更好让我理解

你能告诉我如何在脚本标签中获取我的数据库数据，比如我使用把手，所以如果我在参数名称角色 role 上获取数据，如果我使用它，我可以获取所有数据，但如果我在脚本标签中做同样的事情，它无法在那里获取数据

你的数据库字段值的类型是什么？字符串 |布尔 |整数 | ?如果它是像“yes”、“no” => 这样的字符串，则需要将值测试为：每个字符串在布尔值中始终为 true，即使是空字符串“”。 var input_checked = false; if (db_value === "yes") input_checked = true;如果值是布尔值那么好，如果值是整数，每个大于零的整数都在布尔值中给出真，输入的道具检查需要布尔值所以真或假。

获取数据是另一回事，您是使用服务器端 Web 服务还是用于获取 mongo db 数据？逻辑是您需要服务器端（后端）rest API 或 GraphQL 端点，并使用 AJAX、ApolloClient、JS fetch API 或其他您想要的库通过端点 url 获取数据。获取数据通常是异步的，您需要等待才能使用它。