Question

我有一个简单的问题。谷歌搜索了很多，但无法找到合适的解决方案。我有一个列表，基于5个复选框。

abc.html

<li id="DisplaySelection">  </li> 
{{form.Test1 }}   //checkbox1 
.... 
{{form.Test5 }}  //checkbox5

main.js

document.getElementById('Test1').onclick = function() {
    if ( this.checked )  {
        var word = 'Selection1';    
        document.getElementById('DisplaySelection').innerHTML +=   ('<li>'+word+'</li>');
    }
    else {
        //  remove same word from list
    }
}

document.getElementById('Test5').onclick = function() {
    if ( this.checked )  {
        word = 'Selection5';
        document.getElementById('DisplaySelection').innerHTML += ('<li>'+word+'</li>');
     }
     else
         //  remove from list
     }
}

我想完成删除部分。也就是说，如果取消选中该复选框，请从列表中删除该项。我该如何工作？是的，我是JavaScript的新手。

感谢您的回答，但问题是我有Django表单字段而不是HTML，我不知道如何向它们添加值和类属性。

Answer 1

   else{
       var str= document.getElementById('DisplaySelection').innerHTML;      
       document.getElementById('DisplaySelection').innerHTML = str.Replace("<li>"+word+"</li>","");        

    }

尝试上面的代码。

Answer 2

首先，您无法在li元素中添加li。

另请注意，您必须为li添加一个唯一的选择器，以便您可以使用它来删除该元素。 cb类被赋予所有复选框，以便我们可以在loop中附加事件。对于change

的checkboxes，也更喜欢click个事件

试试这个例子：

＆＃13;

var cbElems = document.querySelectorAll('.cb');
var onChnageListener = function() {
  if (this.checked) {
    document.getElementById('DisplaySelection').innerHTML += '<li id="' + this.name + '">' + this.name + '</li>';
  } else {
    var elem = document.getElementById(this.name);
    elem.parentNode.removeChild(elem);
  }
};
[].forEach.call(cbElems, function(cb) {
  cb.addEventListener('change', onChnageListener);
});

＆＃13;

<input type='checkbox' name='Test1' class='cb'>
<input type='checkbox' name='Test2' class='cb'>
<input type='checkbox' name='Test3' class='cb'>
<input type='checkbox' name='Test4' class='cb'>
<input type='checkbox' name='Test5' class='cb'>
<ul id="DisplaySelection"></ul>

＆＃13;

Fiddle here

Answer 3

你应该在另一个结构中解决这个问题。

从HTML开始。为所有复选框指定相同的类名，并将选中的“word”存储为某些数据属性：

<input type="checkbox" class="check" data-word="For starters: selection #one">

然后您就可以一次选中所有复选框：

var checkboxes = document.querySelectorAll('.check');

完成此操作后，您需要为循环中的所有复选框绑定click事件：

for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].addEventListener('click', function() {
        var word = this.getAttribute('data-word');
        if (this.checked) {
            selected.push(word);
        } else {
            selected.splice(selected.indexOf(word), 1);
        }
        document.getElementById('DisplaySelection').innerHTML = renderSelected();
    });
}

您可以在这里将新单词推送到所选单词列表或从中删除。

最后你只需要渲染你想要的方式。此功能委托给单独的功能，例如：

function renderSelected() {
    return '<li>' + selected.join('</li><li>') + '</li>'
}

最终结果：

var checkboxes = document.querySelectorAll('.check');
var selected = [];

for (var i = 0; i < checkboxes.length; i++) {
	checkboxes[i].addEventListener('click', function() {
    	var word = this.getAttribute('data-word');
        if (this.checked) {
            selected.push(word);
        } else {
            selected.splice(selected.indexOf(word), 1);
        }
        document.getElementById('DisplaySelection').innerHTML = renderSelected();
    });
}

function renderSelected() {
	return '<li>' + selected.join('</li><li>') + '</li>'
}

<input type="checkbox" class="check" data-word="For starters: selection #one"> For starters <br>
<input type="checkbox" class="check" data-word="One more item: another"> One more item <br>
<input type="checkbox" class="check" data-word="Also something else"> Something else <br>

<ul id="DisplaySelection"></aul>

Answer 4

我想你想要一些东西......

＆＃13;

var classname = document.getElementsByClassName('item');

for (var i = 0; i < classname.length; i++) {
  classname[i].addEventListener('click', myFunction);
}

function myFunction() {
  if (this.checked) {
    document.getElementById('selectedItems').innerHTML += '<li id="' + this.value + '">' + this.value + '</li>';
  } else {
    var elem = document.getElementById(this.value);
    elem.parentNode.removeChild(elem);
  }
}

＆＃13;

<h4>Selected Items</h4>
<ul id='selectedItems'>
</ul>
<div>
  <h4>Select Items</h4>
  <ul>
    <li>
      <input type='checkbox' value='item1' class='item'>Item1</li>
    <li>
      <input type='checkbox' value='item2' class='item'>Item2</li>
    <li>
      <input type='checkbox' value='item3' class='item'>Item3</li>
  </ul>
</div>

＆＃13;

添加从列表中删除项目

4 个答案: