Add a checkbox within a checkbox

Question

I'm creating a todo list and am trying to create a delete button. I'm going to make the delete button a checkbox, but I'm not sure how to add it to my task.

$(() => {
  $('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>

When I clicked Run Code Snippet it seemed to work, What's your expected outcome then? Is not clear from the question — Dvid Silva
– Dvid Silva, Commented Jul 10, 2019 at 4:39
I'm trying to add a delete button right next to the side of the text of the tasks, that when clicked, will make the task completely disappear. — Aurora123
– Aurora123, Commented Jul 10, 2019 at 4:45
Why do you want to use a checkbox? why not use a regular button and have an event listener that deletes it, using an id or the index or parent selector — Dvid Silva
– Dvid Silva, Commented Jul 10, 2019 at 4:48

Jon P · Accepted Answer · 2019-07-10 05:09:49Z

You can't put a checkbox in a checkbox, it doesn't really make sense. How would the browser know what to act upon.

To solve your problem, I've added an additional checkbox which is hidden by CSS, the label for it used to toggle the check box.

Then we use jQuery to find the items with the delete check box checked and remove the parent 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}

<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="newtaskitem0" name="done" class="right-margin">
  <input type='checkbox' id='delete${idx}' name="delete" value="newtaskitem0"><label>test</label><label for='delete${idx}' class="delete" title="Select item for removal">♻</label></li>
</ul>
<input type="button" value="Delete marked items" id="deleteItems">

Himanshu Pant · Accepted Answer · 2019-07-10 05:10:58Z

Hope this solves the issue.

$(() => {
  $('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>

Collectives™ on Stack Overflow

Add a checkbox within a checkbox

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related