复选框取消点击事件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.