javascript & html - как снять флажок - PullRequest
Новая
       1

javascript & html - как снять флажок

0 голосов
/ 27 сентября 2019

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

Итак, в основном я создаю программу, которая позволяет пользователю создавать и управлять«список дел», заставляющий пользователя добавлять и удалять элементы.В настоящее время, если пользователь вводит что-то в текстовое поле и нажимает кнопку добавления, устанавливается новый флажок.Я пытаюсь получить его, чтобы пользователь также мог удалить флажки / элементы, установив флажок и нажав кнопку удаления.Я пытался написать программу, пытаясь сделать это, но когда я запустил ее в своем HTML-браузере, она ничего не сделала, и я не уверен, почему.

HTML-КОД: 

<html>
    <head>
        <title>Checklist</title>
    </head>
    <body>
        <div><h1>My to-do list</h1></div><br />
        <div id ="myCheckList">Enter an item:</div>
        <div>Type something: <input type="text" id="textbox"></input></div>
        <input type="button" id="addBut" value = "Add item" onclick="addItem()"/>
        <input type="button" id="removeBut" value =  "Remove items" onclick="removeItem()"/>
        <input type="button" id="toggleBut" value = "Toggle highlight" onclick="toggle()"/>
        <input type="button" id="sortBut" value = "Sort items" onclick="sort()"/>

        <script src="addHandler.js"></script>
        <div id="checklist_items"></div>
    </body>
</html>

КОД JAVASCRIPT: 

function addItem() {
    var input = document.getElementById("textbox");
    var wrapper = document.getElementById("checklist_items");
    if(input.value.trim() != "") {
        var new_element = document.createElement("DIV");
        new_element.innerHTML = '<input type="checkbox"> '+input.value;
        wrapper.appendChild(new_element);
    }
    else {
        alert("You must enter at least 1 character.");
    }
}


function removeItem(){
    if (document.getElementById('checklist_items').checked){
        ("checklist_items").remove();
    }

}

Ответы [ 3 ]

0 голосов
/ 27 сентября 2019

Вы можете получить список всех входов внутри этого div и проверить, проверены ли они или нет, и если они проверены, вы можете удалить как div, так и вход 

function addItem() {
    var input = document.getElementById("textbox");
    var wrapper = document.getElementById("checklist_items");
    if(input.value.trim() != "") {
        var new_element = document.createElement("DIV");
        new_element.innerHTML = '<input type="checkbox"> '+input.value;
        wrapper.appendChild(new_element);
    }
    else {
        alert("You must enter at least 1 character.");
    }
}


function removeItem(){
var ele=document.querySelector('#checklist_items').querySelectorAll('div')
    for(let i=0;i<ele.length;i++)
    {
    if(ele[i].querySelector('input').checked)
    {
   ele[i].querySelector('input').parentNode.removeChild(ele[i].querySelector('input'));
    ele[i].parentNode.removeChild(ele[i])
}
    }

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
    <head>
        <title>Checklist</title>
    </head>
    <body>
        <div><h1>My to-do list</h1></div><br />
        <div id ="myCheckList">Enter an item:</div>
        <div>Type something: <input type="text" id="textbox"></input></div>
        <input type="button" id="addBut" value = "Add item" onclick="addItem()"/>
        <input type="button" id="removeBut" value =  "Remove items" onclick="removeItem()"/>
        <input type="button" id="toggleBut" value = "Toggle highlight" onclick="toggle()"/>
        <input type="button" id="sortBut" value = "Sort items" onclick="sort()"/>

        <script src="addHandler.js"></script>
        <div id="checklist_items"></div>
    </body>
</html>
0 голосов
/ 27 сентября 2019 
    You need to add an unique Id based when you add check box
var i=0; 
function addItem() {
    i=i+1;
    var input = document.getElementById("textbox");
    var wrapper = document.getElementById("checklist_items");
    if(input.value.trim() != "") {
        var new_element = document.createElement("DIV");
        new_element .setAttribute("id", "add"+i);
        new_element.innerHTML = '<input type="checkbox" onclick="setRemoveableList(i)"> '+input.value;
        wrapper.appendChild(new_element);
    }
    else{
        alert("You must enter at least 1 character.");
    }
}
var removeList=[];
function setRemoveableList(val){
    removeList.push(val);
}

function removeItem(){
      for(var j=0;j<removeList.length;j++){
        var cuurrId='add'+removeList[j];
         var rm= document.getElementById(cuurrId);
        return rm.parentNode.removeChild(rm);
         //either you can hide the div by $("#"+cuurrId).hide()

        }
    }
0 голосов
/ 27 сентября 2019

Вы пытаетесь проверить свойство checked родительского элемента div ( # checklist_items ), у которого вообще нет этого свойства ( checked ).

Вы можете установить все отмеченные флажки внутри checklist_items , используя Document.querySelectorAll().Затем выполните цикл по ним, чтобы удалить parentNode текущего элемента. 

function addItem() {
    var input = document.getElementById("textbox");
    var wrapper = document.getElementById("checklist_items");
    if(input.value.trim() != "") {
        var new_element = document.createElement("DIV");
        new_element.innerHTML = '<input type="checkbox"> '+input.value;
        wrapper.appendChild(new_element);
    }
    else {
        alert("You must enter at least 1 character.");
    }
}


function removeItem(){
  var list = document.querySelectorAll('#checklist_items input:checked');
  list.forEach(function(chk){
    chk.parentNode.remove();
  });
}
<div><h1>My to-do list</h1></div><br />
<div id ="myCheckList">Enter an item:</div>
<div>Type something: <input type="text" id="textbox"></input></div>
<input type="button" id="addBut" value = "Add item" onclick="addItem()"/>
<input type="button" id="removeBut" value =  "Remove items" onclick="removeItem()"/>
<input type="button" id="toggleBut" value = "Toggle highlight" onclick="toggle()"/>
<input type="button" id="sortBut" value = "Sort items" onclick="sort()"/>

<script src="addHandler.js"></script>
<div id="checklist_items"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...