如果复选框被选中，我如何运行在复选框旁边的文本中划一行？

Question

$(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>

**我想在文本被选中后运行划一行，但我不知道该怎么做。我已经在上面粘贴了我的大部分代码，并且我尝试切换列表的可见性以确保检查功能是否有效。检查功能有效。我只想知道一旦选中框旁边的复选框，我应该如何删除文本。 **

Answer 1

你可以参考这篇文章来完成这个任务here。无论如何，我尝试使用它并且效果很好。希望这篇能给大家一些启发。

在您的 jQuery 代码上添加标签，<label>' + mylist + '</label> 看起来像这样：

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

  });
});

并将此行添加到您的 CSS:

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

如果复选框被选中，我如何运行在复选框旁边的文本中划一行？

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

html

javascript

css

jquery

addeventlistener

如果复选框被选中，我如何 运行 在复选框旁边的文本中划一行？

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

html

javascript

css

jquery

addeventlistener

如果复选框被选中，我如何运行在复选框旁边的文本中划一行？