Блог

Главная - Вопросы по программированию - Как мне провести строку через мой текст рядом с флажком, если флажок установлен?

Как мне провести строку через мой текст рядом с флажком, если флажок установлен?

#javascript #html #jquery #css #addeventlistener

#javascript #HTML #jquery #css #addeventlistener

Вопрос:

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

** Я хочу провести строку через текст, как только он будет выбран, и я не уверен, как это сделать. Я вставил большую часть своего кода выше, и я попытался переключить видимость списка, чтобы убедиться, работает ли функция проверки или нет. Функция проверки работает. Мне просто нужны некоторые идеи о том, как я должен вычеркивать текст, как только флажок рядом с полем установлен. **

Ответ №1:

вы можете сослаться на эту статью, чтобы выполнить эту задачу здесь . В любом случае я пытаюсь использовать его, и он работает нормально. Надеюсь, это может дать вам некоторое представление.

Добавьте метку в свой код 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;
}

Комментарии:

1. Это наследует серьезный недостаток исходного кода, в итоге вы получите флажки с повторяющимися идентификаторами, вы должны устранить это и правильно связать метку с полем с помощью for атрибута.

2. О, мой плохой, @JonP спасибо за понимание. Я просто фокусируюсь на проблеме CSS input:checked , но это решение создает еще одну серьезную проблему, lol.

3. Нет проблем, ваше фактическое решение CSS — это то, что я бы сделал, просто стоит упомянуть о большой проблеме с дублирующимися идентификаторами.