復選框取消點擊事件Javascript
[英]Checkbox unclick event Javascript
問題描述
我有復選框取消選中事件的問題。 當我取消選中該復選框時，應將其還原。 我怎樣才能做到這一點？
<body>
<script>
function change()
{
var cb = document.querySelectorAll('input[type="checkbox"]')[0];
var td = document.querySelectorAll("td[contenteditable]")[0];
cb.addEventListener("click", function () {
td.className = td.className + " crossed";
});
}
</script>
</body>
3 個解決方案
解決方案1
3 已采納 2015-12-22 18:24:46
像這樣切換類：
cb.addEventListener("click", function () {
td.classList.toggle("crossed");
});
JSFiddle演示
或檢查checkbox是否已選中：
cb.addEventListener("click", function () {
if(cb.checked) td.classList.add("crossed");
else td.classList.remove("crossed");
});
如果您想保留較舊的瀏覽器支持 ，可以這樣做：
cb.addEventListener("click", function() {
if (cb.checked) td.className += " crossed";
else {
var tdclass = td.className.split(" "),
ind = tdclass.indexOf("crossed");
tdclass.splice(ind, 1).join(" ");
td.className = tdclass;
}
});
解決方案2
1 2015-12-22 18:44:00
盡管您已經接受了答案，但建議對以下內容進行一些細微調整：
function change() {
// querySelector() returns the first element matching the
// selector (or null, if no matching element is found):
var cb = document.querySelector('input[type="checkbox"]'),
td = document.querySelector("td[contenteditable]");
// use the change event on the check-box:
cb.addEventListener("change", function () {
// adds, or removes, the class 'crossed'
// based on the assessment that follows;
// of the cb node is checked (true) the
// class is added (if not already present),
// otherwise it's removed:
td.classList.toggle('crossed', cb.checked);
});
}
解決方案3
-2 2015-12-22 18:27:55
好吧，當您單擊取消勾選時，希望重新啟用刻度！
$("input[type='checkbox']").props('checked','false') {
$("input[type='checkbox']").props('checked','true')
}
嘗試使用id類的選擇器或其他替代項： input[type='checkbox']
計數+ /-對於復選框，單擊並取消單擊
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.