单击复选框javascript时如何划掉文本答案

【问题标题】：how to cross out the text when clicking checkBox javascript单击复选框javascript时如何划掉文本
【发布时间】：2016-12-19 10:06:56
【问题描述】：

当用户单击复选框时，我正在尝试删除复选框按钮旁边的文本。但是当我测试它时，由于某种原因什么都没有发生。我想检查该框是否已选中。如果是，那么我想在该复选框旁边越过该项目。但是，此功能不起作用。有人可以解释我做错了什么吗？谢谢。

function myFunction() {
  var editButton = document.createElement("button");
  //button.delete
  var deleteButton = document.createElement("button");
  var item = document.getElementById("todoInput").value
  var checkBox = document.createElement("input");
  checkBox.type = "checkbox";
  checkBox.id = "checkbox"
  var text = document.createTextNode(item)
  var newItem = document.createElement("li")
  newItem.className = "addedClass"

  newItem.appendChild(text)
  if (item === "") {
    alert("please fill in the blanks");
  } else {
    var crap = document.getElementById("todoList")
    crap.appendChild(newItem)
    var addhere = document.getElementById("todoList")
    addhere.appendChild(checkBox);
  }

  function updateItem() {
    if (document.getElementById(checkbox).checked) {
      document.getElementById(todoList).style.textDecoration = "line-through"
    }
  }
}

<form name="myForm" id="todoForm">
  <input id="todoInput" name="fname" required>
  <button type="button" onclick="myFunction()">OK</button>
</form>
<ol id="todoList"></ol>

【问题讨论】：

您似乎在“todoList”这个词周围缺少了一些引号——它说 document.getElementById(todoList)
试着想想当复选框被点击时会发生什么。目前，您的代码似乎无法处理事件。所以你要解决的第一个问题就是这个。还可以尝试使用开发者工具 (F12) 和控制台。

标签： javascript jquery checkbox

【解决方案1】：

首先处理事件并调用更新函数，这个sn-p你需要将事件添加到复选框。希望对你有帮助，谢谢。

function myFunction()
{
 
 var item=document.getElementById("todoInput").value
 var checkBox = document.createElement("input");
 checkBox.type = "checkbox";
 checkBox.id="checkbox"
 checkBox.onchange=updateItem
 var text=document.createTextNode(item)
 var newItem=document.createElement("li")
 newItem.className="addedClass"
 newItem.appendChild(text)
  if (item === "")
  {
    alert("please fill in the blanks"); 
  }
  else
  {
    var crap=document.getElementById("todoList")
    crap.appendChild(newItem)
    var addhere=document.getElementById("todoList")
    addhere.appendChild(checkBox);
   }
   function updateItem()
  {
    if (document.getElementById("checkbox").checked)
    {
      document.getElementById("todoList").style.textDecoration="line-through"
    }
  }

}

  <html>
    <form  name="myForm" id="todoForm">
    <input id="todoInput" name="fname" required  >
    <button type="button" onclick="myFunction()">OK</button>
       </form>
         <ol id ="todoList">
         </ol>
  </html>

【讨论】：

感谢您的帮助，但由于某种原因，它删除了所有下一个元素。其他的 li 也被划掉了
因为您为所有动态生成的复选框 checkBox.id="checkbox" 指定了相同的 id，所以您的 id 相同，因此您需要为生成的不同复选框使用不同的 id
那么我是否只为生成的每个复选框添加新类？
checkBox.className="new class" 然后在点击时在css中设置样式？

【解决方案2】：

您可以将其他明智的 HTML5 元素用于相同的目的。

<strike>not yet available!</strike>

【讨论】：

【解决方案3】：

你的代码有很多问题，

我所做的一些修复/改进，

您的 myFunction() 代码中缺少 } 或关闭不当。
始终尝试将id 用于您要处理的元素。我在li 上添加了id。（文本节点）

function myFunction()
{

var item=document.getElementById("todoInput").value
var checkBox = document.createElement("input");

 checkBox.type = "checkbox";
 checkBox.id="checkbox"

 var text=document.createTextNode(item)
 var newItem=document.createElement("li")
newItem.id = "textEl";
 newItem.className="addedClass"
 newItem.appendChild(text)
 
  if (item === "") {
    alert("please fill in the blanks"); 
  }
  else{

    var crap=document.getElementById("todoList")
     crap.appendChild(newItem)
    var addhere=document.getElementById("todoList")
     addhere.appendChild(checkBox);
    
    document.addEventListener('change', function (e) {
      updateItem();
    });
  }
}

function updateItem()
{
    if (document.getElementById("checkbox").checked)
    {
           document.getElementById("textEl").innerHTML = document.getElementById("textEl").innerHTML.strike();
   }
}

<html>
   <form  name="myForm" id="todoForm">
     <input id="todoInput" name="fname" required  >
     <button type="button" onclick="myFunction()">OK</button>
   </form>
   <ol id ="todoList">

   </ol>
</html>

【讨论】：

感谢您的帮助，但它似乎只适用于列表中的第一个元素。如果您单击其他元素，则由于某种原因它将不起作用。我应该只使用查询选择器来选择所有元素吗？ var list = document.querySelector('li');?