獲得價值/平變化事件

144

<input type="checkbox" onclick="onClickHandler()" onchange="onChangeHandler()" />

從onClickHandler和/或onChangeHandler內，我怎麼能確定是否複選框的新狀態？獲得價值/平變化事件

來源

2010-12-17 Maxim Gershkovich

269

簡短的回答：

當你把它想使用click事件，該事件將不會觸發，直到該值已經更新後，和火災：

<label><input type='checkbox' onclick='handleClick(this);'>Checkbox</label> 

function handleClick(cb) { 
    display("Clicked, new value = " + cb.checked); 
}

Live example | Source

較長的答案：

的change事件處理函數不是調用，直到checked狀態已經更新（live example | source），但因爲（蒂姆·布泰在評論中指出的），即沒有按不會觸發change事件，直到複選框失去焦點爲止，您不會主動收到通知。更糟糕的是，如果您點擊標籤作爲複選框（而不是複選框本身）來更新它，則可以獲得您獲得舊值的印象（請點擊標籤在IE瀏覽器中試用：live example | source）。這是因爲如果複選框具有焦點，則單擊標籤將使焦點遠離焦點，用舊值觸發change事件，然後click發生設置新值並將焦點設置回覆選框。很混亂。

但是，如果您使用click來代替，則可以避免所有這些不愉快。

我用DOM0處理器（onxyz屬性），因爲這是你問什麼，但爲了記錄在案，我一般會建議掛接在代碼處理程序（DOM2的addEventListener，或attachEvent在舊版本的IE），而不是使用onxyz屬性。這使您可以將多個處理程序附加到相同的元素，並可以避免使您的所有處理程序具有全局功能。

這個答案的早期版本中使用此代碼爲：

function handleClick(cb) { 
    setTimeout(function() { 
    display("Clicked, new value = " + cb.checked); 
    }, 0); 
}

的目標似乎是使點擊看值之前完成。據我所知，沒有理由這樣做，我不知道我爲什麼這樣做。該值在調用click處理程序之前已更改。實際上，規格是quite clear about that。沒有setTimeout的版本在我嘗試過的每個瀏覽器（甚至IE6）中都能很好地工作。我只能假設我在考慮一些其他平臺，直到事件發生之後才進行更改。無論如何，沒有理由使用HTML複選框來做到這一點。

來源

2010-12-17 14:34:47

幸運'onchange'在'+ IE9'正常工作。 [來源]（http://www.quirksmode.org/dom/events/change.html） – Mori 2014-01-26 07:30:01

在這裏添加我的2分錢：看起來，IE8（以及以下，我假設）區分點擊和點擊發布...而且我們在這個網頁上的原因是因爲點擊而不是點擊發布而觸發。似乎複選框僅在點擊發布時激活 - 單擊然後移動鼠標將註冊點擊，但不會修改複選框。 – dah97765 2014-08-05 16:49:16

看起來像通過鍵盤導航（'tab' +'space'）切換複選框也會觸發'onclick'處理程序（至少在Chrome 51中進行驗證）。 – 2016-06-17 18:16:31

使用此

<input type="checkbox" onclick="onClickHandler()" id="box" /> 

<script> 
function onClickHandler(){ 
    var chk=document.getElementById("box").value; 

    //use this value 

} 
</script>

來源

2017-03-07 16:06:26 Farhan

獲得價值/平變化事件

回答

相關問題