如果选中复选框，如何在复选框旁边的文本中运行一行？
[英]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.我只是想要一些关于如何在选中框旁边的复选框后删除文本的想法。 ** **
1 个解决方案
解决方案1
2 已采纳 2020-10-21 01:26:49
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:在你的 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>');
});
});
And add this line to your CSS:并将此行添加到您的 CSS：
input:checked+label {
text-decoration: line-through;
text-decoration-color: #fff;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.