火上input.checked =真/假_without_ jQuery的

Question

事件考慮下面的代碼（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事件。

本質上，只有當用戶實際點擊複選框而不是時，如果通過JavaScript更改了複選框，則複選框的onchange纔會觸發。在IE，FF和Chrome中都是如此。看起來這種行爲也適用於規範。

但是，如果出於任何原因，我確實需要某種事件觸發複選框的選中狀態更改。這可能嗎？

噢，和jQuery不允許。並請不要setTimeout/setInterval的解決方案要麼...

更新：此外，我應該說清楚，上面的代碼僅用於說明。在真實代碼中，我們需要確保複選框的狀態被選中或不選中 - 而不僅僅是切換它。或許，這將是更好的代碼來說明：

<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 =真/假 - 我們想以確保我們也看到了。

Answer 1

現有的答案工作得很好，即使您的更新。如果你不需要的話，請小心點，不要打電話。另外，請不要使用內聯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，你可以使用onpropertychangehttp://msdn.microsoft.com/en-us/library/ie/ms536956(v=vs.85).aspx（感謝來提醒）

例如：http://jsfiddle.net/PPuZ8/1/

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

對於其他瀏覽器，你必須使用的setInterval/setTimeout的

Answer 2

使用click()

<button onclick="document.getElementsByTagName('input')[0].checked=!document.getElementsByTagName('input')[0].click();">toggle</button> 

Answer 3

有切換按鈕實際上點擊複選框：

<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中綁定點擊事件。

Answer 4

oninput是你需要處理的事件輪詢... https://developer.mozilla.org/en/DOM/DOM_event_reference/input