在复选框内添加复选框

Question

我正在创建一个待办事项列表，并试图创建一个删除按钮。我将使“删除”按钮成为一个复选框，但不确定如何将其添加到任务中。

$(() => {
  $('input').on('keypress', function(e) {
    if (e.keyCode == 13) {
      const newTask = $(this).val();
      if (newTask) {
        var li = $("<li><input type='checkbox' id='newtasklist' class='right-margin' <label>" + newTask + "</label></li>");
        $('#tasksUL').append(li);
        $(this).val("");
      }
    }
  });

  $('body').on('click', ':checkbox', function(e) {
    $(this).parent().toggleClass('selected');
  });
});

.selected {
  text-decoration: line-through;
  font-size: 20px;
}

.right-margin {
  margin-right: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<input type="text" name="newtask" value="" spellcheck="false" placeholder="New Task" id="newtask">
<ul id="tasksUL">
  <li><input type="checkbox" id="newtaskitem" class="right-margin"><label>test</label></li>
</ul>

Answer 1

您不能在复选框中放置一个复选框，这没有任何意义。浏览器如何知道要采取什么措施。

为解决您的问题，我添加了一个额外的复选框，该复选框被CSS隐藏，它的标签用于切换该复选框。

然后，我们使用jQuery查找选中了“删除”复选框的项目，并删除父项implementation 'androidx.legacy:legacy-support-v4:1.0.0' implementation 'androidx.browser:browser:1.0.0' implementation 'androidx.mediarouter:mediarouter:1.0.0' implementation 'com.github.rubensousa:gravitysnaphelper:1.0' implementation 'com.gordonwong:material-sheet-fab:1.2.1' implementation 'com.github.dv-ha:floatingsearchview:v1.0.4' implementation 'com.lapism:searchview:4.0' implementation 'com.crystal:crystalrangeseekbar:1.1.1' implementation 'com.firebaseui:firebase-ui-storage:3.3.1' implementation 'com.firebaseui:firebase-ui-auth:3.3.1' implementation 'com.firebaseui:firebase-ui-database:3.3.1' implementation 'com.wdullaer:materialdatetimepicker:3.2.0' implementation 'com.github.bumptech.glide:glide:4.9.0' implementation 'com.github.PhilJay:MPAndroidChart:v3.0.3' annotationProcessor 'com.github.bumptech.glide:compiler:4.8.0' implementation 'commons-net:commons-net:3.3' implementation 'androidx.constraintlayout:constraintlayout:1.1.3'

li

$(() => {
  let idx = 0;
  $('input').on('keypress', function(e) {
    if (e.keyCode == 13) {
      const newTask = $(this).val();
      if (newTask) {

        //Use a template literal, it makes replacing things easier. Use a counter
        //to make sure id's are uniqe
        idx++;
        var li = $(`<li><input type='checkbox' id='newtasklist${idx}' name="done" class='right-margin'><input type='checkbox' id='delete${idx}' name="delete" value="newtaskitem${idx}"><label>${newTask}</label><label class="delete" title="Select item for removal" for='delete${idx}'>♻</label></li>`);
        $('#tasksUL').append(li);
        
      }
    }
  });
 
  $("#deleteItems").on("click", function(){
    //find checked delete checkboxes and iterate them
    $("#tasksUL [name=delete]:checked").each(function(){
      //find the parent list item and remove it
      $(this).closest("li").remove();
    })
  })

});

/*We can do the decoration with CSS*/
#tasksUL input[name=done]:checked~label {
  text-decoration: line-through;
  font-size: 20px;
}

.right-margin {
  margin-right: 30px;
}

/*Hide the delete check box - use the label instead*/
[type="checkbox"][name="delete"] {display:none;}


.delete {margin-left:1em;}

/*Change the appearence when marked for deletion*/
#tasksUL input[name=delete]:checked ~ label {color:#ccc; font-weight:bold}

Answer 2

希望这可以解决问题。

$(() => {
  $('input').on('keypress', function(e) {
    if (e.keyCode == 13) {
      const newTask = $(this).val();
      if (newTask) {
        var li = $("<li><input type='checkbox' id='newtasklist' class='right-margin' <label>" + newTask + "</label></li>");
        $('#tasksUL').append(li);
        $(this).val("");
      }
    }
  });

  $('body').on('click', ':checkbox', function(e) {
    $(this).parent().toggleClass('selected');
  });
  $(".delete-btn").on("click", function(){
    $(this).parent().remove();
  });
});

.selected {
  text-decoration: line-through;
  font-size: 20px;
}

.right-margin {
  margin-right: 30px;
}
.delete-btn {
  display: none;
}
.selected .delete-btn {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<input type="text" name="newtask" value="" spellcheck="false" placeholder="New Task" id="newtask">
<ul id="tasksUL">
  <li>
    <input type="checkbox" id="newtaskitem" class="right-margin">
    <label>test</label>
    <button type="button" class="delete-btn">Del</button>
  </li>
</ul>