Вопрос по html, javascript – Запустить событие на input.checked = true / false _without_ jQuery

9

Рассмотрим следующий код (http://jsfiddle.net/FW36F/1/):

<input type="checkbox" onchange="alert(this.checked)">
<button onclick="document.getElementsByTagName('input')[0].checked=!document.getElementsByTagName('input')[0].checked;">toggle</button>

Если вы нажмете эту кнопку-флажок, вы получите предупреждение о том, установлен он или нет. Отлично. Однако, если вы нажимаете кнопку переключения, флажок изменяет его проверенное состояние, но событие onchange НЕ запускается.

По сути, onchange для флажка срабатывает только в том случае, если пользователь действительно нажимает флажок,not если флажок изменен с помощью JavaScript. Это верно для IE, FF и Chrome. Похоже, что это поведение также для спецификации.

Однако мне действительно нужно какое-то событие, чтобы инициировать, если по какой-либо причине помеченное состояние флажка изменяется. Это возможно?

Ах да иjQuery is not allowed, И, пожалуйста, не используйте решения на основе setTimeout / setInterval ...

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

<input type="checkbox" onchange="alert(this.checked)">
<button onclick="document.getElementsByTagName('input')[0].checked=true;">check</button> 
<button onclick="document.getElementsByTagName('input')[0].checked=false;">un check</button>

Кроме того, может существовать код в других областях, которые мы не полностью контролируем, что может сделать простое .checked = true / false - мы хотели бы убедиться, что мы также видим это.

@JuanMendes Не с теми ограничениями, которые он наложил на решение. Он хочет знать, когдаchecked изменения собственности. Jivings
@jivings Это правда, я не видел часть, где ОП говорит, что некоторые другие части кода могут просто установитьchecked=true непосредственно. С этой оговоркой, опрос является единственным ответом. За исключением FF, где вы можете использоватьObject.watch Смотрите дополнение к моему ответу. Juan Mendes
Что не так с таймаутами? Я не думаю, что есть что-то еще, что сработает. Jivings
JQuery не будет запускать собственное событие изменения, просто устанавливая его значение Juan Mendes
@Jivings: Я не могу поверить, что вы на самом деле спросили, что не так с опросом с использованием тайм-аута. Это подобно выбрасыванию циклов и добавлению задержки к тому времени, когда вы получите уведомление. Чем меньше задержка, тем больше вы тратите циклы процессора. Здесь имеется множество ответов, которые удовлетворяют требованию ФП. Juan Mendes

Ваш Ответ

4   ответа
1

click()

<button onclick="document.getElementsByTagName('input')[0].checked=!document.getElementsByTagName('input')[0].click();">toggle</button>
Error: User Rate Limit Exceededjsfiddle.net/D8PXP
7

update, Просто будьте осторожны и не звоните, если вам это не нужно. Также, пожалуйста, не используйте встроенный JS. Это было нормально 10 лет назад.

<input type="checkbox" onchange="alert(this.checked)">
<button id='check'>check</button> 
<button id='uncheck'>uncheck</button>

document.getElementById('check').onclick = function() {
   if (!this.checked) {
      this.click();
   }
}

Если вам нужно изменить, когда скрипт изменяет значение, в Firefox вы можете использоватьhttps://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/watch

Пример здесьhttp://jsfiddle.net/PPuZ8/

// In FF $ is a shortcut for document.getElementById
// It doesn't fire when set from the UI, you have to use a regular handler for that
$('cb').watch("checked", function(){
   console.log('Checked state changed from script', arguments);
   return true;
});

Для IE вы можете использоватьonpropertychange http://msdn.microsoft.com/en-us/library/ie/ms536956(v=vs.85).aspx  (Спасибо Jivings за напоминание)

Пример:http://jsfiddle.net/PPuZ8/1/

document.getElementById('cb').onpropertychange = function() {    
    if (event.propertyName == 'checked') {
       console.log('Checked state changed onproperty change');    
    }
};

Для других браузеров, вы должны опросить, используя setInterval / setTimeout

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededele.checked=true/falseError: User Rate Limit Exceeded jwl
2

click флажок:

<input type="checkbox" onchange="alert(this.checked)">
<button onclick="document.getElementsByTagName('input')[0].click()">
  toggle
</button>

Если вы хотите, чтобы какое-либо изменение в флажке сообщало вам о его новой позиции, я бы создал глобальный метод для изменения значения флажка и работал бы с ним как с прокси:

<script>
function toggleCB( state ) {
  var cb = document.getElementById("cb");
  arguments.length ? cb.checked = state : cb.click() ;
  return cb.checked;
}
</script>
<input id="cb" type="checkbox" />
<input type="button" onClick="alert( toggleCB(true) )" value="Check" />
<input type="button" onClick="alert( toggleCB(false) )" value="Uncheck" />
<input type="button" onClick="alert( toggleCB() )" value="Toggle" />​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Теперь каждый раз, когда вы устанавливаете или переключаете флажок, вы возвращаете проверенное состояние.

И последнее, я бы не стал использоватьonClick атрибут, и вместо этого связать события клика изнутри вашего JavaScript.

Error: User Rate Limit Exceeded jwl
Error: User Rate Limit Exceeded
Error: User Rate Limit ExceededBUTError: User Rate Limit Exceeded jwl
Error: User Rate Limit Exceeded jwl
Error: User Rate Limit Exceeded
-1
Error: User Rate Limit Exceededjsfiddle.net/D8PXP

Похожие вопросы