Question

我做了一个todolist，它从输入中获取值并从数组中添加一个项目，所以当页面i中显示的给定值想要删除一个项目表单数组时，选中复选框。

Html部分：

<input type="text" id="field" placeholder="Type name" />
<button type="submit" onclick="insertitem()">Submit</button>
<p id="para"></p>

javascript部分：

var list = [];
var input;
function insertitem() {
    input = document.getElementById('field').value;
    list.push(input);
    DisplayItem(list);
    document.getElementById('field').value='';

}
function DisplayItem(data) {
    var contain = document.getElementById('para');
    contain.innerHTML='';
    for ( var i in data) {
        contain.innerHTML +="<div><input id='box' onClick='remove()' type='checkbox' /><label>" + data[i] + "</label></div>";
    }
}
function remove() {
    var check = document.getElementById('box').value;
    for ( var i in list) {
        if (list[i]!= check) {

        }
    }
}

Answer 1

尝试使用纯javascript：

Array.splice 和 Array.indexof()

在标签标签内添加复选框。

点击事件更改remove(this)。然后轻松找到标签   文字并与list array匹配。

contain.innerHTML +="<div><label><input id='box' onClick='remove(this)' type='checkbox' />" + data[i] + 
              "</label></div>";
        }

＆＃13;

var list = [];
var input;
function insertitem() {
    input = document.getElementById('field').value;
    list.push(input);
    DisplayItem(list);
    document.getElementById('field').value='';

}
function DisplayItem(data) {
    var contain = document.getElementById('para');
    contain.innerHTML='';
    for ( var i in data) {
        contain.innerHTML +="<div><label><input id='box' onClick='remove(this)' type='checkbox' />" + data[i] + 
          "</label></div>";
    }
}
function remove(that) {
    var check = that.parentElement.textContent;
  //that.remove() if you need remove clicked box
    for ( var i in list) {
        if (list[i] == check) {
              list.splice(list.indexOf(check),1);
        }
    }
  console.log(list)
}

＆＃13;

<input type="text" id="field" placeholder="Type name" />
<button type="submit" onclick="insertitem()">Submit</button>
<p id="para"></p>

＆＃13;

Answer 2

var list = [];
var input;
function insertitem() {
    input = document.getElementById('field').value;
    list.push(input);
    DisplayItem(list);
    document.getElementById('field').value='';

}
function DisplayItem(data) {
    var contain = document.getElementById('para');
    contain.innerHTML='';
    for ( var i in data) {
        contain.innerHTML +="<div id='remove" + i + "'><label for='box" + i + "'><input id='box" + i + "' onClick='remove(" + i + ")' type='checkbox' />" + data[i] + "</label></div>";
    }
}
function remove(targetId) {
    var check = document.getElementById('box' + targetId).checked;
    if(check){
      console.log('Remove box' + targetId);
      document.getElementById('remove' + targetId).innerHTML='';
    }
}

  <input type="text" id="field" placeholder="Type name" />
  <button type="submit" onclick="insertitem()">Submit</button>
  <p id="para"></p>

我刚刚修改了你的JavaScript以传递带有数字的ID，以便将每个标签彼此分开..

我想在选中生成复选框时删除数组项

2 个答案: