向数据库发送 true 或 false 复选框是不是选中
Posted
技术标签:
【中文标题】向数据库发送 true 或 false 复选框是不是选中【英文标题】:Send true or false to database wether checkbox is checked or not向数据库发送 true 或 false 复选框是否选中 【发布时间】:2020-12-11 15:47:50 【问题描述】:我遇到了关于 nedb 复选框的问题。如果选中复选框,我想将 true 或 false 发送到数据库,我无法解决此问题。我正在使用 node.js 和 nedb。请帮忙!
客户端js事件监听器:
var taskDone = document.querySelectorAll('.taskDone');
taskDone.forEach(btn =>
btn.addEventListener('click', (e) =>
var done = e.target.attributes[1].value;
let id = e.target.getAttribute('data-id');
let isDone = document.querySelector(`input[data-id=$id]`).value;
console.log(isDone + "isdone")
if ($(taskDone).is(':checked'))
$('.text').addClass('line-through')
console.log("trues")
$.ajax(
url: 'http://localhost:3000/done/' + id,
type: 'PUT',
data: isDone
).done(function (data)
//location.reload()
console.log(data)
)
else
console.log('falses')
$('.text').removeClass('line-through')
)
)
更新函数到 nedb:
function taskIsDone (id, done)
return new Promise((resolve, reject) =>
db.update( _id: id , $set: done , returnUpdatedDocs: true , (err, num, updateDocs) =>
if (err)
reject(err)
else
resolve(updateDocs)
)
)
服务器:
app.put('/done/:_id', async(req, res) =>
try
var id = req.params._id;
let done =
title: req.body.isDone,
const updateToDo = await taskIsDone(id, done)
console.log(updateToDo + " Todo done");
res.json(updateToDo);
catch (error)
res.json(error: error.message);
)
html/ejs:
<% for ( var i = 0; i < row.length; i++) %>
<div class="edit-container" >
<input type="text" name="editTask" value="<%=row[i].title %>" data-id="<%=row[i]._id %>">
<button name="<%= row[i]._id %>" class="edit" data-id="<%=row[i]._id %>">save edit</button>
</div>
<div>
<input type="checkbox" name="isDone" class="taskDone" data-id="<%=row[i]._id %>">
<span class="text"><%= row[i].title %></span>
<button class="delete" name="<%= row[i]._id %>">delete</button>
</div>
<br>
<% %>
我真的需要一些帮助!谢谢
【问题讨论】:
$(taskDone)
正在使用 querSelectorAll
方法,该方法返回一个节点列表 - 数组类型。您没有选择您点击的实际复选框!
你也可以添加你的 HTML 吗?
那我应该怎么做呢?添加了 html @AlwaysHelping
您是在复选框 checked
上调用该更新函数还是在单击按钮时调用该更新函数?
这是一个点击功能。但我得到了所有控制台数据,但如果任务完成与否,我无法改变状态
【参考方案1】:
我重新创建了一个 minimal
示例,说明您尝试对复选框选中状态进行的操作。我添加了三个具有相同类名的复选框.taskDone
我使用的是change
函数而不是click
函数。每次您在checkbox
上clicked
并检查时,它都会显示带有检查的控制台日志以及checkbox
的data-i
d。
要获取数据ID,您可以简单地使用jQuery 的.data
函数并在data-**
之后指定您想要的内容以获取它的存储值。
另外,不要在 jQuery 中使用 fat arrow
- =>
函数。使用普通函数语句,这样您就可以通过使用 $(this)
而不是指定每个 class
或 id
来访问您的东西
现场工作演示:
let taskDone = document.querySelectorAll('.taskDone'); //get all the chechbox with same class .taskDone
taskDone.forEach(function(btn) //use normal function
btn.addEventListener('change', function()
let id = $(this).data('id') //get the data id of checkbox
if ($(this).is(':checked')) //check if the clicked checkbox is checked or not
console.log(id + ' is Checked - Updating neDB') //console.log
$.ajax(
url: 'http://localhost:3000/done/' + id,
type: 'PUT',
data: 'isDone'
).done(function(data)
console.log(data)
)
else
console.log("Not Checked")
)
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="isDone" class="taskDone" data-id="1">
<input type="checkbox" name="isDone" class="taskDone" data-id="2">
<input type="checkbox" name="isDone" class="taskDone" data-id="3">
【讨论】:
以上是关于向数据库发送 true 或 false 复选框是不是选中的主要内容,如果未能解决你的问题,请参考以下文章
在复选框中显示来自 mySQL 的 true 或 false (0/1)
当复选框 true 或 false 时从 DOM 中删除并重新添加
如何使用复选框在 mySQL 中输入 true (1) 或 false (0) 并显示为在 php / html 表单中选中?
如何通过获取nodes.text并设置为true或false来填充Treeview node.checked为true或false