向数据库发送 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 函数。每次您在checkboxclicked 并检查时,它都会显示带有检查的控制台日志以及checkboxdata-id。

要获取数据ID,您可以简单地使用jQuery 的.data 函数并在data-** 之后指定您想要的内容以获取它的存储值。

另外,不要在 jQuery 中使用 fat arrow - =&gt; 函数。使用普通函数语句,这样您就可以通过使用 $(this) 而不是指定每个 classid 来访问您的东西

现场工作演示:

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 复选框是不是选中的主要内容,如果未能解决你的问题,请参考以下文章

如何在数据库中将复选框保存为true或false

在复选框中显示来自 mySQL 的 true 或 false (0/1)

当复选框 true 或 false 时从 DOM 中删除并重新添加

如何使用复选框在 mySQL 中输入 true (1) 或 false (0) 并显示为在 php / html 表单中选中?

AJAX - 向服务器发送请求

如何通过获取nodes.text并设置为true或false来填充Treeview node.checked为true或false