CODEWITHSUNDEEP
javascripthtmljquerycssaddeventlistener
Nisarg Shah
Nisarg Shah

Reputation: 53

How do I run a line through my text next to the checkbox if the checkbox is checked?

$(document).ready(function() {
  $('#btn').click(function() {
    var mylist = $('#input').val();
    $('#myUL').prepend('<li><input type="checkbox" id = "check" name="interest" onclick="toggleBoxVisibility()">' + mylist + '</li>');

  });

});

function toggleBoxVisibility() {
  if (document.getElementById("check").checked == true) {

    document.getElementsByTagName("LI").style.visibility = "visible";

  } else {

    document.getElementById("myUL").style.visibility = "hidden";

  }
}
#container {
  text-align: center;
  margin: auto;
  width: 400px;
  border: 1px solid #ccc;
}

ul li {
  cursor: pointer;
  position: relative;
  padding: 12px 8px 12px 40px;
  background: #eee;
  font-size: 18px;
  transition: 0.2s;
  /* make the list items unselectable
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; */
}

ul li.checked {
  background: #888;
  color: #fff;
  text-decoration: line-through;
}

ul li.checked::before {
  content: '';
  position: absolute;
  border-color: #fff;
  border-style: solid;
  border-width: 0 2px 2px 0;
  top: 10px;
  left: 16px;
  transform: rotate(45deg);
  height: 15px;
  width: 7px;
}

.addBtn {
  padding: 10px;
  width: 25%;
  background: #d9d9d9;
  color: #555;
  float: left;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 0;
}

input {
  margin: 0;
  border: none;
  border-radius: 0;
  width: 75%;
  padding: 10px;
  float: left;
  font-size: 16px;
}

.header:after {
  content: "";
  display: table;
  clear: both;
}

#myUL {
  width: 50%;
  margin-left: auto;
  margin-right: 27%;
}

.claim {
  position: absolute;
  right: 0;
  top: 0;
}

#check {
  margin-right: -190px;
  margin-left: -190px;
  margin-top: 9px;
}
<html>

<head>
  <title>Login </title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>


  <body>

    <div class="hero">
      <div class="container">
        <h1 class="display-2 text-center">To-Do</h1>

        <div class="row">
          <form id="form" class="col-lg-6 col-8 mx-auto">
            <div class="input-group">
              <input id="input" class="form-control" placeholder="Enter a new task here">
              <span>
                                <button id="btn" type="button" class="btn btn-primary" >Add</button>
                            </span>
            </div>

        </div>

        <ul id="myUL">
          <li>Hit the gym </li>
          <li class="checked">Pay bills</li>
          <li>Meet George</li>
          <li>Buy eggs</li>

        </ul>

        <div class="row">
          <button id="btnClr" type="button" class="btn btn-primary mx-auto btnHide"> Remove Complete </button>
        </div>
        </form>
      </div>
    </div>



  </body>

</html>

**I want to run a line through the text once it is selected and I am not sure how to do that. I have pasted most of my code above and I tried to toggle the visiblity of the list in order to make sure if the checking function works or not. The checking function works. I just want some ideas of how should i strike through the text once the checkbox next to the box is selected. **

Upvotes: 2

Views: 234

Answers (1)

Adi Sakti Jrs
Adi Sakti Jrs

Reputation: 99

you can refer this article to done this task here. Anyway I try to use it and it works fine. Hope this one can give you some insight.

Add label on your jQuery code, <label>' + mylist + '</label> and looks something like this:

$(document).ready(function() {
  $('#btn').click(function() {
    var mylist = $('#input').val();
    $('#myUL').prepend('<li><input type="checkbox" id = "check" name="interest" onclick="toggleBoxVisibility()"><label>' + mylist + '</label></li>');

  });
});

And add this line to your CSS:

input:checked+label {
  text-decoration: line-through;
  text-decoration-color: #fff;
}

Upvotes: 2

Related Questions