Прослушиватель событий для изменения в флажках, проверенных скрытыми средствами - PullRequest
Новая
       29

Прослушиватель событий для изменения в флажках, проверенных скрытыми средствами

0 голосов
/ 20 мая 2019 

      
var checkboxes = document.querySelectorAll('input[type=checkbox]');
        
        
function func() {
    checkboxes[1].checked = true;
}
        
for(var i = 0; i < checkboxes.length; i++) {
     checkboxes[i].addEventListener("click", function(i) {
         console.log('cat')
  });
}
       
   
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
    
    
<button onclick = 'func()'>PRESS</button>

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

Ответы [ 2 ]

0 голосов
/ 20 мая 2019

Метод click элемента-флажка имитирует нажатие на него.Необходимо учитывать, что он будет переворачивать состояние атрибута checked флажка.

Например, этот фрагмент только нажимает checkbox[1] в func, если он не отмечен, и не устанавливает установленный флажок.статус к истине.Если вначале для checked установлено значение true, при щелчке по нему checked сразу же возвращается в значение false. 

      
var checkboxes = document.querySelectorAll('input[type=checkbox]');
        
        
function func() {
    if( !checkboxes[1].checked) {
        checkboxes[1].click();
    }
}
        
for(var i = 0; i < checkboxes.length; i++) {
     checkboxes[i].addEventListener("click", function(i) {
         console.log('cat')
  });
}
       
   
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
    
    
<button onclick = 'func()'>PRESS</button>
0 голосов
/ 20 мая 2019

Свяжите флажок с меткой, например:

<input id = "chx1" type="checkbox">
<label for = "chx1" >STYLE LABEL LIKE A BUTTON</label>

Флажок #id синхронизируется с меткой [for]. Однажды связанные при нажатии - они оба ведут себя так, как если бы они были нажаты. В демоверсии форма оборачивается вокруг всего. Вводя форму в качестве общего родителя, мы можем зарегистрировать форму для событий (щелчок является обычным, но формы, входы и т. Д. Имеют специальные события). Мы назначаем событие изменения форме, и теперь флажки могут реагировать на каждое изменение, не привязываясь к слушателю события. Подробности прокомментированы в демоверсии. 

// Reference the form
const form = document.forms.Health;
// Register the form to change event
form.onchange = testSync;

// Pass Event Object (e)
function testSync(e) {
  // Reference the checked checkbox
  const checked = e.target;
  // Get it's #id
  let ID = e.target.id;
  // Get the button/label associated with checkbox
  let button = document.querySelector(`[for=${ID}]`);
  // if the checkbox is checked...
  if (checked.checked) {
    // Set the button/label text to checkbox ID
    button.textContent = ID;
  } else {
    // Otherwise set text to the button/label .class
    button.textContent = button.className;
  }
  return false;
}
label {
  width: 50px;
  border: 1px solid #cacaca;
  border-radius: 3px;
  font-size: 12px;
  font-family: arial, helvetica, sans-serif;
  padding: 10px 10px 10px 10px;
  text-align: center;
  display: inline-block;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
  font-weight: bold;
  color: #000;
  background-color: #E6E6E6;
  background-image: linear-gradient(to bottom, #E6E6E6, #CCC);
}

label:hover {
  border: 1px solid #b3b3b3;
  background-color: #cdcdcd;
  background-image: linear-gradient(to bottom, #cdcdcd, #b3b3b3);
  cursor: pointer;
}
<form id='Health'>

  <input id="Nutrition" name='health' type="checkbox" value='H1'> Health 1<br>
  <input id="Activity" name='health' type="checkbox" value='H2'> Health 2<br>
  <input id="Medical" name='health' type="checkbox" value='H3'> Health 3<br>


  <label class='Health1' for="Nutrition">Health1</label><br>
  <label class='Health2' for="Activity">Health2</label><br>
  <label class='Health3' for="Medical">Health3</label><br>

</form>
...