У меня простой вопрос. Погуглил это много, но не смог найти подходящего решения. У меня есть список, основанный на 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, и я не знаю, как добавить к ним атрибуты value и class.

-1
Saphire_80 15 Дек 2015 в 14:21

4 ответа

Лучший ответ

Я думаю, вы хотите что-то это ....

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);
  }
}
<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>
0
Rayon 2 Авг 2016 в 13:05

Прежде всего, вы не можете добавить li внутрь элемента li.

Также обратите внимание, что у вас должен быть уникальный селектор для li, который добавляется, чтобы вы могли использовать его для удаления элемента. cb класс присваивается всем флажкам, чтобы мы могли прикреплять события в loop. Также предпочтите change событие для checkboxes, которое click

Попробуйте этот пример:

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

Скрипка здесь

0
Rayon 15 Дек 2015 в 11:44
   else{
       var str= document.getElementById('DisplaySelection').innerHTML;      
       document.getElementById('DisplaySelection').innerHTML = str.Replace("<li>"+word+"</li>","");        

    }

Попробуйте приведенный выше код.

0
Akshey Bhat 15 Дек 2015 в 11:30

Вы должны действительно решить это в другой структуре.

Начните с HTML. Присвойте всем флажкам одинаковое имя класса и сохраните проверенное «слово» как некоторый атрибут данных:

<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>
0
dfsq 15 Дек 2015 в 11:36