Tengo la siguiente tabla:
<table class="table" id="tableImport">
<thead>
<tr>
<th scope="col"><input type="checkbox" id="checkBoxAll"/></th>
<th scope="col">[[#{table.importExcel.customerID}]]</th>
<th scope="col">[[#{table.importExcel.customer}]]</th>
<th scope="col">[[#{table.importExcel.customerEmail}]]</th>
<th scope="col">[[#{table.importExcel.customerPhone}]]</th>
<th scope="col">[[#{table.importExcel.customerTotal}]]</th>
<th scope="col">Debt Age (Days)</th>
</tr>
</thead>
<tbody>
<tr th:each="debtFileTO:${debtFileTOs}">
<td>
<input id="selecteds" type="checkbox" name="customersSelecteds" th:value="${debtFileTO.customerid}" class="chkCheckBoxId"/>
</td>
<td th:text="${debtFileTO.customerid}"></td>
<td th:text="${debtFileTO.customernombre}"></td>
<td th:text="${debtFileTO.customeremail}"></td>
<td th:text="${debtFileTO.customerphone}"></td>
<td th:text="'$'+${#numbers.formatInteger(debtFileTO.totaldebt,3,'POINT')}"></td>
<td th:text="${debtFileTO.debtage}"></td>
</tr>
</tbody>
</table>
Necesito validar que si ninguna fila se encuentra con el checkbox activo, me muestre un mensaje en un span que diga "seleccione al menos 1 cliente".
De momento lo estoy haciendo así con javaScript pero soy bastante nuevo en el tema y no me funciona.
Script:
<script>
function validateCustomers(){
var customersSelecteds;
customersSelecteds =document.getElementById('selecteds').value;
if (customersSelecteds ==="") {
document.getElementById("span").innerHTML = "Seleccione al menos un cliente";
return false
}
}
</script>
Este es mi span y boton con el que valido e intento mostrar el mensaje:
<span id="demo"></span>
<input style="position: static" type="submit" onclick="validateCustomers()" class="btn btn-primary" value="Configure Campaign"/>