如何创建一个函数来删除我在检查时添加的复选框“任务”？答案

【问题标题】：How do I create a function that will delete checkboxes "tasks" that i added upon checking them?如何创建一个函数来删除我在检查时添加的复选框“任务”？
【发布时间】：2020-04-19 02:59:48
【问题描述】：

我正在做一个任务，我正在创建一个任务管理器。我已经让添加一个新任务工作了，但是一旦你点击一个复选框，我就无法扭转这种情况。我很确定它几乎可以工作，可能只有几行需要调整。

这是我所有的 HTML 和 JS/jQuery 上下文代码：

HTML：

<div>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
        </script>
    </head>

        <div id="sidebar">
            <h2>Overall Status</h2>

                <div class="sb" id="schl.stat">
                    <h3>School -</h3>
                        <input type="submit" id="schl.bttn" value="0">
                </div>

                <div class="sb">
                    <h3>Work -</h3>
                        <input type="submit" id="wrk.bttn" value="0">
                </div>

                <div class="sb">
                    <h3>Weekend -</h3>
                        <input type="submit" id="wknd.bttn" value="0">
                </div>

                <div class="sb">
                    <h3>Other -</h3>
                        <input type="submit" id="othr.bttn" value="0">
                </div>

         </div>

         <div id="tasks">
             <div id="newtask">
                 <h2>Add New Task</h2>


                 <div id="IDK">
                     <div id="idk">
                        <label for="options">Options*</label>
                            <select id="options">
                                <option hidden disabled selected value>------------------------------------------</option>
                                <option value="School">School</option>
                                <option value="Work">Work</option>
                                <option value="Weekend">Weekend</option>
                                <option value="Other">Other</option>
                            </select>
                     </div>

                        <div id="idk2">
                            <label for="date">Completion Date</label>
                                <input type="date" id="date">
                        </div>
                 </div>

                    <label for="tdesc">Description*</label>
                        <input type="text" id="tdesc" size="75">

                    <input type="submit" id="add" value="Add">
                        <div id="req"><strong>* Required fields</strong></div> 
            </div>




              <div id="current">

                    <h2>Current Tasks</h2>

                          <div id="schlwrk">
                              <div id="schl">
                                  <h4>School</h4>
                                  <br>
                              </div>

                              <div id="wrk">
                                  <h4>Work</h4>
                                  <br>
                              </div>
                          </div>

                          <div id="wkndothr">
                                <div id="wknd">
                                  <h4>Weekend</h4>
                                  <br>
                                </div>
                                <div id="othr">
                                  <h4>Other</h4>
                                  <br>
                                </div>
                          </div>
              </div>



        </div>
</div>

JS/jQuery：

var a = 0;
var b = 0;
var c = 0;
var d = 0;



function addTask() {

  var newTask = $("#tdesc").val();
  var newTask2 = $("#date").val();

  if ($("#options").val() == "" || $("#tdesc").val() == "") {
    alert("You have not completed all required fields.");

  } else if ($("#options").val() == "School") {
    $("#schl").append("<input type='checkbox'" + 
                     "name='checkbox'" + 
                     "class='checkbox1'" +
                     "value=" + 
                     newTask +
                     newTask2 +
                     "'>" +
                     newTask +
                     newTask2 +
                     "<br>");

  document.getElementById("schl.bttn").value = ++a;

  } else if ($("#options").val() == "Work") {
    $("#wrk").append("<input type='checkbox'" + 
                     "name='checkbox'" + 
                     "class='checkbox2'" +
                     "value=" + 
                     newTask +
                     newTask2 +
                     "'>" +
                     newTask +
                     newTask2 +
                    "<br>");

    document.getElementById("wrk.bttn").value = ++b;

  } else if ($("#options").val() == "Weekend") {
    $("#wknd").append("<input type='checkbox'" + 
                     "name='checkbox'" + 
                     "class='checkbox3'" +
                     "value=" + 
                     newTask +
                     newTask2 +
                     "'>" +
                     newTask +
                     newTask2 +
                     "<br>");

    document.getElementById("wknd.bttn").value = ++c;

  } else {
    $("#othr").append("<input type='checkbox'" + 
                     "name='checkbox'" + 
                     "class='checkbox4'" +
                     "value=" + 
                     newTask +
                     newTask2 +
                     "'>" +
                     newTask +
                     newTask2 +
                     "<br>");

    document.getElementById("othr.bttn").value = ++d;
  }

  $("#tdesc").val("");
  $("#date").val("");

}

$(document).ready(function() {
     $("#add").on("click", function() {
         addTask();
});
});












**var checkBox1 = $(".checkbox1");
var checkBox2 = $(".checkbox2");
var checkBox3 = $(".checkbox3");
var checkBox4 = $(".checkbox4");
function deleteTask() {

if (checkBox1.is(":checked")) {
    $("schl").remove("<input type='checkbox'" + 
                     "name='checkbox'" + 
                     "class='checkbox1'" +
                     "value=" + 
                     newTask + 
                     newTask2 +
                     "'>" +
                     newTask +
                     newTask2 +
                     "<br>");

document.getElementById("schl.bttn").value = --a;

} else if (checkBox2.is(":checked")) {
    $("wrk").remove("<input type='checkbox'" + 
                     "name='checkbox'" + 
                     "class='checkbox2'" +
                     "value=" + 
                     newTask +
                     newTask2 +
                     "'>" +
                     newTask +
                     newTask2 +
                    "<br>");

document.getElementById("wrk.bttn").value = --b;

} else if (checkBox3.is(":checked")) {
    $("wknd").remove("<input type='checkbox'" + 
                     "name='checkbox'" + 
                     "class='checkbox3'" +
                     "value=" + 
                     newTask +
                     newTask2 +
                     "'>" +
                     newTask +
                     newTask2 +
                     "<br>");

document.getElementById("wknd.bttn").value = --c;

} else {
    $("othr").remove("<input type='checkbox'" + 
                     "name='checkbox'" + 
                     "class='checkbox4'" +
                     "value=" + 
                     newTask +
                     newTask2 +
                     "'>" +
                     newTask +
                     newTask2 +
                     "<br>");

document.getElementById("othr.bttn").value = --d;
  }
}
$(document).ready(function() {
     $(":checkbox").on("click", function() {
         deleteTask();
});
});**

任何帮助将不胜感激:) 谢谢

【问题讨论】：

标签： jquery checkbox task

【解决方案1】：

主要问题是在文档准备好时设置了“点击时”事件处理程序，此时文档上没有复选框（因此，永远不会调用 deleteTask）。

您应该在 addCheckbox 中设置点击事件处理程序。

但是，您的代码中还有其他问题：

您有多个$(document).ready(function(){});，在您的代码中只使用一个。
您应该以这种方式创建您的复选框，您的代码将更具可读性：

$('<input />', { type: 'checkbox', value: newTask+newTask2, class: 'checkbox4' }).appendTo($('#othr'));
$('<label />', {  text: newTask+newTask2 }).appendTo($('#othr'));

您应该在您的复选框上使用唯一的 id（通过添加 id 属性），并在 for attribute of your labels 中引用此 id，以便用户可以单击标签以选中该框。
在您的on click 处理程序上，您可以使用$(this) 来获取用户点击的项目（例如，当您想要找到用户点击的复选框时）。

【讨论】：

我是否还需要添加一个 ID，因为每个部分中都会有多个复选框，并且我不希望人们能够单击文本并使其选中该框？另外我不确定如何添加事件处理程序，我将其添加到每个部分： onclick: 'deleteTask(this)',