Динамическое изменение флажка не запускается onChange?

Question

Примечание: jQuery не является вариантом.

Я хочу, чтобы обнаружить изменение состояния флажка, но событие OnChange, кажется, не срабатывает, когда я делаю это:

document.getElementById('myCheckBox').addEventListener('change',function() { 
    console.log('Changed!'); 
}); 
document.getElementById('someLink').onClick = function() { 
    // toggle checkbox 
    document.getElementById('myCheckBox').checked = !document.getElementById('myCheckBox').checked; 
}; 

Когда я нажимаю #someLink событие изменения не уволили , Я мог бы добавить еще одного слушателя в #myLink, но если я добавлю другие ссылки, которые проверяют один и тот же ящик, я должен добавить больше слушателей. Мне нужен один слушатель для события изменения флажка. Опять же, jQuery не вариант, мне нужен ванильный JS.

EDIT: Извините, если я не сделал это более понятным, но я хочу избежать добавления сложности каждой ссылки, которая будет проверять этот флажок. Итак, ideal (и, может быть, ответ в том, что это невозможно). Я не хочу, чтобы изменить логику ссылок/кликов вообще. Я хочу иметь возможность изменять свойство .checked в любом месте кода и обнаруживать его без дополнительной логики при каждом изменении (если это возможно).

UPDATE:

Хорошо, так что, по-видимому нет способа сделать это красиво, не меняя логику OnClick, так (как своего рода животное) я в конечном итоге перебирая проблему следующим образом:

function mySentinel() { 
    if(document.getElementById('myCheckBox').checked) { 
     console.log("I've been checked!"); 
     return; 
    } 
    setTimeout("mySentinel()",100); 
} 
// then call this somewhere in the on document load section... 
mySentinel(); 

вы можете добавить какой-то тайм-аут, если вы хотите также:

function mySentinel(var i) { 
    if(document.getElementById('myCheckBox').checked) { 
     console.log("I've been checked!"); 
     return; 
    } 
    if(i <= 0) { 
     console.log("Time out. Still not checked"); 
    } 
    i--; 
    setTimeout("mySentinel("+i+")",100); 
} 
// then call this somewhere in the on document load section... 
// 60 second timeout (some math can make the argument look nicer) 
mySentinel(600); 

Answer 1

1. Если вы хотите добавить дополнительные ссылки, которые будут запускать этот флажок, создайте для них имя класса и используйте getElementByClass('classname')
2. Используйте onclick в своем html, а не js. Пример: <div onclick="doSomething()"></div>

3. Просто используйте если/другое заявление для проверки/снимите флажок:

   if(document.getElementById('myCheck').checked){document.getElementById("myCheck").checked = false;} else{document.getElementById("myCheck").checked = true;} 
   

Answer 2

Это правильно, изменение значения или проверяется состояние входа программно не срабатывают обработчики событий ,

Вы должны инициировать событие, а с JavaScript

document.getElementById('myCheckBox').addEventListener('change',function() { 
    console.log('Changed!'); 
}); 

document.getElementById('someLink').onclick = function() { 
    var box = document.getElementById('myCheckBox') 
    box.checked = !box.checked; 

    if ("createEvent" in document) { 
     var evt = document.createEvent("HTMLEvents"); 
     evt.initEvent("change", false, true); 
     box.dispatchEvent(evt); 
    } else { 
     box.fireEvent("onchange"); 
    } 
}; 

и обратите внимание, что это это onclick (строчными буквами)

FIDDLE

---

EDIT

Я хочу, чтобы не добавлять сложность к каждой ссылке, которая будет проверять этот флажок.
Так идеально ... Я не хочу менять логику ссылок/кликов вообще.
Я хочу иметь возможность изменять свойство .checked в любом месте кода и обнаруживать его без дополнительной логики при каждом изменении (если это возможно).

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

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

document.getElementById('myCheckBox').addEventListener('change',function() { 
    console.log('Changed!'); 
}); 

var links = document.querySelectorAll('.someLinkClass'); 

for (var i = links.length; i--;) { 
    links[i].addEventListener('click', triggerChange, false); 
} 


function triggerChange() { 
    var box = document.getElementById('myCheckBox') 
    box.checked = !box.checked; 

    if ("createEvent" in document) { 
     var evt = document.createEvent("HTMLEvents"); 
     evt.initEvent("change", false, true); 
     box.dispatchEvent(evt); 
    } else { 
     box.fireEvent("onchange"); 
    } 
}; 

и в любое время вы добавить ссылку, вы просто добавить этот класс

<a href="#" class="someLinkClass">Change the checkbox</a> 
<a href="#" class="someLinkClass">Change the checkbox again</a> 
<a href="#" class="someLinkClass">Change the checkbox even more</a> 

и т.д.

Answer 3

Вы можете вызывать/запускать событие, но это не так просто, как кажется, особенно когда вам приходится иметь дело с Internet Explorer.

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

function handleEvent(){ 
    console.log('Changed!'); 
} 

documentent.getElementById('myCheckBox').addEventListener('change',function() { 
    handleEvent() 
}); 
document.getElementById('someLink').onClick = function() { 
    // toggle checkbox 
    document.getElementById('myCheckBox').checked = !document.getElementById('myCheckBox').checked; 
    handleEvent(); 
}; 

Answer 4

Я думаю, что jQuery имеет событие изменения. И вы не используете его в хорошем смысле.

Прочитайте эту страницу: http://api.jquery.com/change/

и это: jQuery checkbox change and click event

При возникновении каких-либо изменений в окошке, функция события JQuery называется. И тогда вы можете написать что-нибудь в этом событии.