[英]Html checkbox event listener not working?
我有多个具有相同名称的复选框,并且都可以通过javascript访问它们,但是我无法为其中的任何一个添加事件监听器。 我已经尝试了在互联网上找到的所有解决方案。 但就我而言,它们都不起作用,这意味着未调用我的目标侦听器方法selectAll 。 我的代码如下
的HTML
<div class="row" th:each="bytesaver : ${bytesaverList}">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2 th:text="${bytesaver.name}">Bytesaver 1</h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div>
<table class="table table-bordered">
<thead>
<th>
<input type="checkbox" class="form-control flat" name="checkBoxByteSaver" th:value="${bytesaver.name}"/>
Select All
</th>
</thead>
</table>
</div>
</div>
<!-- x_content -->
</div>
<!-- x_panel -->
</div>
<!-- available IP List -->
Java脚本
$(document).ready(function() {
var selectAllBoxs = document.getElementsByName("checkBoxByteSaver");
console.log("total element count: "+selectAllBoxs.length)
for (var i = 0; i < selectAllBoxs.length; i++) {
//selectAllBoxs[i].change(selectAll);
console.log("Value: "+selectAllBoxs[i].value +" boolean: "+selectAllBoxs[i].addEventListener);
selectAllBoxs[i].addEventListener ("CheckboxStateChange", selectAll, false);
}
}
function selectAll(){
console.log("Select All pressed");
}
在的地方selectAllBoxs[i].addEventListener
我已经尝试了一些其他方法,如selectAllBoxs[i].onclick = function() { selectAll(); }
selectAllBoxs[i].onclick = function() { selectAll(); }
和
selectAllBoxs[i].addEventListener( 'change', function() {
if(selectAllBoxs[i].checked) {
console.log("Some checkbox is selected. Value: "+selectAllBoxs[i].value);
} else {
// Checkbox is not checked..
console.log("Some checkbox is unselected. Value: "+selectAllBoxs[i].value);
}
});
和
if (selectAllBoxs[0].addEventListener) {
for (var i = 0; i < selectAllBoxs.length; i++) {
selectAllBoxs[i].addEventListener("change", selectAll, false);
}
} else if (selectAllBoxs[0].attachEvent) {
for (var i = 0; i < selectAllBoxs.length; i++) {
selectAllBoxs[i].attachEvent("onchange", selectAll);
}
}
但不幸的是,它们都不起作用。
value
复选框不改变。 仅checked
属性。 复选框的工作方式与您期望的不同。
如果未选中该复选框, 则该表单就不会包含在该表单中 。
因此,Thymeleaf会为每个具有th:field
绑定的复选框生成一个隐藏的文本输入。
这证明一个简单的变更侦听器将被调用 :
document.addEventListener('DOMContentLoaded', function() { let cbs = document.getElementsByName('checkBoxByteSaver'); for (let i = 0; i < cbs.length; i++) { cbs[i].addEventListener('change', hubbaloo); } }) function hubbaloo(e) { console.log(this.value, this.checked ? 'checked' : 'not checked'); }
<input type="checkbox" class="form-control flat" name="checkBoxByteSaver" value="foo" /> <input type="checkbox" class="form-control flat" name="checkBoxByteSaver" value="bar" /> <input type="checkbox" class="form-control flat" name="checkBoxByteSaver" value="baz" /> <input type="checkbox" class="form-control flat" name="checkBoxByteSaver" value="yo" /> <input type="checkbox" class="form-control flat" name="checkBoxByteSaver" value="yolo" />
$(document).ready(function() { var selectAllBoxs = document.getElementsByName("checkBoxByteSaver"); console.log("total element count: "+selectAllBoxs.length) for (var i = 0; i < selectAllBoxs.length; i++) { //selectAllBoxs[i].change(selectAll); console.log("Value: "+selectAllBoxs[i].value +"boolean: "+selectAllBoxs[i].addEventListener); selectAllBoxs[i].addEventListener ("change", selectAll, false); } }) function selectAll(e){ console.log("Select All pressed"); if(e.target.checked) { console.log(e.target.value + " is checked"); } else { console.log(e.target.value + " is unchecked"); } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row" th:each="bytesaver : ${bytesaverList}"> <div class="col-md-12 col-sm-12 col-xs-12"> <div class="x_panel"> <div class="x_title"> <h2 th:text="${bytesaver.name}">Bytesaver 1</h2> <div class="clearfix"></div> </div> <div class="x_content"> <div> <table class="table table-bordered"> <thead> <th> <input type="checkbox" class="form-control flat" name="checkBoxByteSaver" th:value="${bytesaver.name}" value="Select All 1"/> Select All 1 </th> <th> <input type="checkbox" class="form-control flat" name="checkBoxByteSaver" th:value="${bytesaver.name}" value="Select All 2"/> Select All 2 </th> </thead> </table> </div> </div> <!-- x_content --> </div> <!-- x_panel --> </div> <!-- available IP List -->
只需使用change
事件而不是CheckboxStateChange
事件即可。
使用此代码: https : //jsfiddle.net/q0mc4gLx/
$(document).ready(function() {
var selectAllBoxs = document.getElementsByName("checkBoxByteSaver");
console.log(selectAllBoxs)
console.log("total element count: " + selectAllBoxs.length)
for (var i = 0; i < selectAllBoxs.length; i++) {
//selectAllBoxs[i].change(selectAll);
console.log("Value: " + selectAllBoxs[i].value + " boolean: " + selectAllBoxs[i].addEventListener);
selectAllBoxs[i].addEventListener('change', function() {
if (this.checked) {
selectAll();
}
});
}
})
function selectAll() {
console.log("Select All pressed");
}
这对你有帮助
$(document).ready(function () {
debugger;
var selectAllBoxs = document.getElementsByName("checkBoxByteSaver");
$("input[name='checkBoxByteSaver']").each(function () {
$(this).bind('change', selectAll);
});
});
function selectAll() {
debugger;
console.log("Select All pressed");
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.