我想计算要切换的切换数，并以文本形式显示，还要获取数组中切换的输入的倍数。我不知道如何很好地使用JavaScript。所以我需要做什么方面的帮助。我尝试使用复选框javascript来显示它的值（如果它的默认复选框为默认值），但是一旦启用了数据切换，它就不起作用。
<table id="godwin" class="table table-striped table-bordered">
<button class="btn btn-success btn-lg float-right " data-toggle="modal" data-target="#task">Reassign Selected Tasks</button>
<button class="btn btn-primary btn-lg float-right "><span class="circle" id="checkall"> 0 </span> Item Selected</button><br>
<thead>
<tr>
<th><i class="fa fa-question-circle fa2"> <input type="checkbox" onclick="toggleOnByInput()"></i></th>
<th>S/N</th>
<th>Proposed name(s)</th>
<th>Presenter</th>
<th>Date of Request</th>
<th>Duration in queue (days)</th>
<th>Data Entry Officer</th>
<th>Reassigned by</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" id="toggle-trigger" onClick="checkbox();" value="4" name="box">
</td>
<td>1</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>audu Uthman</td>
<td>
<button class="btn btn-success"> View Details</button>
</td>
</tr>
<tr>
<td>
<input type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" id="toggle-trigger" onClick="checkbox();" value="3" name="box">
</td>
<td>1</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>audu Uthman</td>
<td>
<button class="btn btn-success"> View Details</button>
</td>
</tr>
<tr>
<td>
<input type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" id="toggle-trigger" onClick="checkbox();" value="1" name="box">
</td>
<td>1</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>audu Uthman</td>
<td>
<button class="btn btn-success"> View Details</button>
</td>
</tr>
<tr>
<td>
<input type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" id="toggle-trigger" onClick="checkbox();" value="2" name="box">
</td>
<td>1</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>audu Uthman</td>
<td>
<button class="btn btn-success"> View Details</button>
</td>
</tr>
<tr>
<td>
<input type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" id="toggle-trigger">
</td>
<td>1</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>audu Uthman</td>
<td>
<button class="btn btn-success"> View Details</button>
</td>
</tr>
<tr>
<td>
<input type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" id="toggle-trigger">
</td>
<td>1</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>audu Uthman</td>
<td>
<button class="btn btn-success"> View Details</button>
</td>
</tr>
<tr>
<td>
<input type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" id="toggle-trigger">
</td>
<td>1</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>audu Uthman</td>
<td>
<button class="btn btn-success"> View Details</button>
</td>
</tr>
<tr>
<td>
<input type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" id="toggle-trigger">
</td>
<td>1</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>audu Uthman</td>
<td>
<button class="btn btn-success"> View Details</button>
</td>
</tr>
<tr>
<td>
<input type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" id="toggle-trigger">
</td>
<td>1</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>audu Uthman</td>
<td>
<button class="btn btn-success"> View Details</button>
</td>
</tr>
<tr>
<td>
<input type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" id="toggle-trigger">
</td>
<td>1</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>audu Uthman</td>
<td>
<button class="btn btn-success"> View Details</button>
</td>
</tr>
<tr>
<td>
<input type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" id="toggle-trigger">
</td>
<td>1</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>audu Uthman</td>
<td>
<button class="btn btn-success"> View Details</button>
</td>
</tr>
<tr>
<td>
<input type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" id="toggle-trigger">
</td>
<td>1</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>audu Uthman</td>
<td>
<button class="btn btn-success"> View Details</button>
</td>
</tr>
<tr>
<td>
<input type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" id="toggle-trigger">
</td>
<td>1</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>audu Uthman</td>
<td>
<button class="btn btn-success"> View Details</button>
</td>
</tr>
<tr>
<td>
<input type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" id="toggle-trigger">
</td>
<td>1</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>audu Uthman</td>
<td>
<button class="btn btn-success"> View Details</button>
</td>
</tr>
<tr>
<td>
<input type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" id="toggle-trigger">
</td>
<td>1</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>audu Uthman</td>
<td>
<button class="btn btn-success"> View Details</button>
</td>
</tr>
<tr>
<td>
<input type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" id="toggle-trigger">
</td>
<td>1</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>audu Uthman</td>
<td>
<button class="btn btn-success"> View Details</button>
</td>
</tr>
<tr>
<td>
<input type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" id="toggle-trigger">
</td>
<td>1</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>audu Uthman</td>
<td>
<button class="btn btn-success"> View Details</button>
</td>
</tr>
<tr>
<td>
<input type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" id="toggle-trigger">
</td>
<td>1</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>audu Uthman</td>
<td>
<button class="btn btn-success"> View Details</button>
</td>
</tr>
<tr>
<td>
<input type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" id="toggle-trigger">
</td>
<td>1</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>audu Uthman</td>
<td>
<button class="btn btn-success"> View Details</button>
</td>
</tr>
<tr>
<td>
<input type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" id="toggle-trigger">
</td>
<td>1</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>audu Uthman</td>
<td>
<button class="btn btn-success"> View Details</button>
</td>
</tr>
<tr>
<td>
<input type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" id="toggle-trigger">
</td>
<td>1</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>audu Uthman</td>
<td>
<button class="btn btn-success"> View Details</button>
</td>
</tr>
<tr>
<td>
<input type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" id="toggle-trigger">
</td>
<td>1</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>audu Uthman</td>
<td>
<button class="btn btn-success"> View Details</button>
</td>
</tr>
<tr>
<td>
<input type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" id="toggle-trigger">
</td>
<td>1</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>audu Uthman</td>
<td>
<button class="btn btn-success"> View Details</button>
</td>
</tr>
<tr>
<td>
<input type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" id="toggle-trigger">
</td>
<td>1</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>audu Uthman</td>
<td>
<button class="btn btn-success"> View Details</button>
</td>
</tr>
</table>
答案 0 :(得分：0)
每次切换复选框都会获取选中复选框的长度。
您无需为每个复选框设置一个单击处理程序，而只需在table元素上设置一个事件处理程序，并利用事件冒泡功能
let table = document.getElementById('godwin');
table.addEventListener('click', function(ev) {
if (ev.target.matches('[type="checkbox"]')) {
console.log("You checked %d checkbox(es)",
document.querySelectorAll('[type="checkbox"]:checked').length);
}
});