Question

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

$scope.manageMember = function (member) {
 $scope.showGrid = false; 
 $scope.showForm = true;
 reset();
 $scope.memberTemp = member;   
 angular.extend($scope.member, member);
 if(member){
    for(var i = 0 ; $scope.reasons.length>i;i++)
     { 
       $scope.reasons[i].show = true;
       if($scope.reasons[i].ID == "Addition"){$scope.reasons[i].show = false;}
     }
   }else{
       for(var i = 0 ; $scope.reasons.length>i;i++)
     { 
       $scope.reasons[i].show = false;
       if($scope.reasons[i].ID == "Addition"){$scope.reasons[i].show = true;}
     }
  }
}

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"
    }
  }
}

Answer 1

首先处理事件并调用更新函数，此代码片段需要将事件添加到复选框。我希望它能帮到你，谢谢。

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

enter code here

Answer 2

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

<strike>not yet available!</strike>

Answer 3

您的代码存在很多问题，

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

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

＆＃13;

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();
   }
}

＆＃13;

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

＆＃13;

单击checkBox javascript时如何删除文本

3 个答案: