是否向数据库发送true或false复选框是否已选中

问题描述

我遇到了有关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>
    <% } %>

我真的需要一些帮助！谢谢

解决方法

我重新创建了一个minimal示例，说明您要如何使用复选框已选中状态。我添加了三个具有相同类名.taskDone

的复选框

我已经使用了change函数而不是click函数。每次您在clicked上checkbox进行检查时，都会显示控制台日志，其中选中并显示data-i中的checkbox 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">

checkbox checkbox javascript jquery nedb