HTML復選框事件監聽器不起作用？

Question

我有多個具有相同名稱的復選框，並且都可以通過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);
     }
    }

但不幸的是，它們都不起作用。

Answer 1

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" /> 

Answer 2

 $(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事件即可。

Answer 3

使用此代碼： 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");
}

Answer 4

這對你有幫助

 $(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");
    }