Отметьте все / не отметьте ни один флажок

Question

Я пытаюсь установить sh пользовательских опций для проверки всех и ни одного флажка. Я использую этот код:

function selectToggle(toggle, form) {
     var myForm = document.forms['cbx'];
     for( var i=0; i < myForm.length; i++ ) { 
          if(toggle) {
               myForm.elements[i].checked = "checked";
          } 
          else {
               myForm.elements[i].checked = "";
          }
     }
}

document.getElementById("all").addEventListener("click", selectToggle, true);
document.getElementById("none").addEventListener("click", selectToggle, false);

Здесь работает только опция check all - check none. Не работает.

Но, если я использую вместо прослушивателей событий встроенный javascript как <a href="javascript:selectToggle(true, 'cbx');">All</a> | <a href="javascript:selectToggle(false, 'cbx');">None</a> оба варианта работают.

Как мне заставить document.getElementById("none").addEventListener("click", selectToggle, false); работать?

Answer 1

Это связано с тем, что третий параметр в addEventListener на самом деле является параметром useCapture . Вы не передаете true или false в arugment для функции selectToggle. Чтобы сделать это, вам нужно будет вызвать его, используя анонимную функцию:

document.getElementById("all").addEventListener("click", () => selectToggle(true)));
document.getElementById("none").addEventListener("click", () => selectToggle(false)));

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

document.getElementById("all").addEventListener("click", () => selectToggle(true, 'cbx')));
document.getElementById("none").addEventListener("click", () => selectToggle(false, 'cbx')));

---

Объяснение причины ошибки в вашем коде: Причина, почему в исходном коде проверка всех функций работает, потому что когда вы используете selectToggle в качестве обратного вызова, например:

document.getElementById('all').addEventListener('click', selectToggle);

... первый аргумент на самом деле является объектом event. Поскольку это объект, который передается первому аргументу с именем toggle, toggle всегда будет правдивым, следовательно, вы всегда будете в конечном итоге выполнять logi c внутри блока if (toggle) {...}.