對複選框選中或未選中事件在html表單上執行操作

我有一個默認情況下未選中的複選框。現在我想對此複選框的選中和未選中狀態執行兩個分離的操作。對複選框選中或未選中事件在html表單上執行操作

這是我的複選框：

<form> 
    syn<input type="checkbox" name="checkfield" id="g01-01" onchange="doalert(this.id)"/> 
</form>

，這是我的腳本：

function doalert(id){ 
    if(this.checked) { 
    alert('checked'); 
    }else{ 
    alert('unchecked'); 
    } 
}

它只是提醒uncheched！什麼是最好的方式來做到這一點。

來源

2015-09-07 shekoufeh

你的函數中的「this」是什麼？ – Popnoodles

我們可以使用JavaScript來做到這一點，不需要jQuery。只需傳遞更改後的元素並讓JavaScript處理它。

HTML

<form id="myform"> 
    syn<input type="checkbox" name="checkfield" id="g01-01" onchange="doalert(this)"/> 
</form>

function doalert(checkboxElem) { 
    if (checkboxElem.checked) { 
    alert ("hi"); 
    } else { 
    alert ("bye"); 
    } 
}

Demo Here

來源

2015-09-07 11:55:28

一個好的答案應該解釋爲什麼OP有他們的問題，以及爲什麼你的解決方案修復它。 – RobG

唯一真正的答案是這一個，因爲我必須使用相同的ID在表單上的幾個項目。 thnaks – shekoufeh

@shekoufeh雖然這是一個很好的答案，可以解決您的問題，但也應該知道所有其他答案也是如此，因爲您無法在文檔中多次使用相同的「id」。如果你需要，你應該改變它到一個班級。 –

<form> 
    syn<input type="checkbox" name="checkfield" id="g01-01" /> 
</form>

JS：

$('#g01-01').on('change',function(){ 
    var _val = $(this).is(':checked') ? 'checked' : 'unchecked'; 
    alert(_val); 
});

來源

2015-09-07 11:58:37 guvenckardas

僅有代碼的答案不被喜歡，特別是當他們需要在OP中沒有標記或提到的庫時，並且不要解釋問題或爲什麼你的答案修復它。 – RobG

您是否嘗試過使用JQuery更改事件？

$("#g01-01").change(function() { 
    if(this.checked) { 
     //Do stuff 
    } 
});

那麼你也可以從你的複選框:)刪除onchange="doalert(this.id)"

編輯：

我不知道，如果你正在使用JQuery，但如果你還沒有使用它，您需要在頁面中放置以下腳本，以便您可以使用它：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

來源

2015-09-07 11:58:51

jQuery沒有更改事件。 – RobG

@RobG http://www.w3schools.com/jquery/event_change.asp –

爲了另一個目的，我在表單中多次重複了這個ID，所以我無法以這種方式處理它。 – shekoufeh

如果您調試您的代碼使用開發人員工具，您會注意到this引用窗口對象而不是輸入控件。考慮使用傳入的ID來檢索輸入並檢查checked的值。

function doalert(id){ 
    if(document.getElementById(id).checked) { 
    alert('checked'); 
    }else{ 
    alert('unchecked'); 
    } 
}

來源

2015-09-07 11:59:51

請考慮編輯您的帖子以添加關於您的代碼的更多說明以及爲什麼它會解決問題。一個大部分只包含代碼的答案（即使它正在工作）通常不會幫助OP瞭解他們的問題。 – Reeno

的問題是你如何連接監聽器：

<input type="checkbox" ... onchange="doalert(this.id)">

在線聽衆有效包裹在一個被稱爲與元素這功能。該函數然後調用doalert函數，但未設置其這個，因此它將默認爲全局對象（瀏覽器中的窗口）。

由於窗口對象沒有檢查屬性，this.checked始終解析爲false。

如果你想這個內doalert是元素，附加使用的addEventListener聽衆：

window.onload = function() { 
    var input = document.querySelector('#g01-01'); 
    if (input) { 
    input.addEventListener('change', doalert, false); 
    } 
}

或者，如果你想使用內聯聽衆：

<input type="checkbox" ... onchange="doalert.call(this, this.id)">

來源

2015-09-07 13:00:34 RobG

對複選框選中或未選中事件在html表單上執行操作

回答

相關問題