我的hy html页面在表格中有很多复选框。 在提交按钮我想检查没有选中。最大允许6。
即检查> = 6, 提交真或假
这是html:
<table id="table-seatmapping">
<tbody>
<tr>
<!-- 1 st row -->
<td>
<div style="display:block;clear: both;float:left;">
<table class="table-seatting">
<tbody>
<tr>
<td class="seat">
<div class="seat-box male">
<div class="seat-no">01</div>
</div>
</td>
</tr>
<tr>
<td class="seat">
<div class="seat-box available">
<div class="seat-no">02</div>
<div class="seat-optn">
<input type="checkbox" class="b-seat" name="seatno" value="02">
</div>
</div>
</td>
</tr>
<tr>
<td class="empty"></td>
</tr>
<tr>
<td class="empty"></td>
</tr>
<tr>
<td class="seat">
<div class="seat-box available">
<div class="seat-no">03</div>
<div class="seat-optn">
<input type="checkbox" class="b-seat" name="seatno" value="03">
</div>
</div>
</td>
</tr>
<tr>
<td class="seat">
<div class="seat-box available">
<div class="seat-no">04</div>
<div class="seat-optn">
<input type="checkbox" class="b-seat" name="seatno" value="04">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<!-- 1st row end -->
<!-- 2nd row -->
<td>
<div style="display:block;clear: both;float:left;">
<table class="table-seatting">
<tbody>
<tr>
<td class="seat">
<div class="seat-box available">
<div class="seat-no">05</div>
<div class="seat-optn">
<input type="checkbox" class="b-seat" name="seatno" value="05" price="236">
</div>
</div>
</td>
</tr>
<tr>
<td class="seat">
<div class="seat-box available">
<div class="seat-no">06</div>
<div class="seat-optn">
<input type="checkbox" class="b-seat" name="seatno" value="06" price="236">
</div>
</div>
</td>
</tr>
<tr>
<td class="empty"></td>
</tr>
<tr>
<td class="empty"></td>
</tr>
<tr>
<td class="seat">
<div class="seat-box available">
<div class="seat-no">07</div>
<div class="seat-optn">
<input type="checkbox" class="b-seat" name="seatno" value="07" price="236">
</div>
</div>
</td>
</tr>
<tr>
<td class="seat">
<div class="seat-box female">
<div class="seat-no">08</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<!-- 2nd row end -->
<!-- 3rd row -->
<td>
<div style="display:block;clear: both;float:left;">
<table class="table-seatting">
<tbody>
<tr>
<td class="seat">
<div class="seat-box male">
<div class="seat-no">09</div>
</div>
</td>
</tr>
<tr>
<td class="seat">
<div class="seat-box available">
<div class="seat-no">10</div>
<div class="seat-optn">
<input type="checkbox" class="b-seat" name="seatno" value="10" price="512">
</div>
</div>
</td>
</tr>
<tr>
<td class="empty"></td>
</tr>
<tr>
<td class="empty"></td>
</tr>
<tr>
<td class="seat">
<div class="seat-box available">
<div class="seat-no">11</div>
<div class="seat-optn">
<input type="checkbox" class="b-seat" name="seatno" value="11" price="512">
</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="seat">
<div class="seat-box female">
<div class="seat-no">12</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<!-- 3rd row end -->
<!-- 4th -->
<td>
<div style="display:block;clear: both;float:left;">
<table class="table-seatting">
<tbody>
<tr>
<td class="seat">
<div class="seat-box male">
<div class="seat-no">13</div>
</div>
</td>
</tr>
<tr>
<td class="seat">
<div class="seat-box available">
<div class="seat-no">14</div>
<div class="seat-optn">
<input type="checkbox" class="b-seat" name="seatno" value="14" price="122">
</div>
</div>
</td>
</tr>
<tr>
<td class="empty"></td>
</tr>
<tr>
<td class="empty"></td>
</tr>
<tr>
<td class="seat">
<div class="seat-box available">
<div class="seat-no">15</div>
<div class="seat-optn">
<input type="checkbox" class="b-seat" name="seatno" value="15" price="441">
</div>
</div>
</td>
</tr>
<tr>
<td class="seat">
<div class="seat-box female">
<div class="seat-no">16</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<!-- 4th end -->
<!-- 5th -->
<td>
<div style="display:block;clear: both;float:left;">
<table class="table-seatting">
<tbody>
<tr>
<td class="seat">
<div class="seat-box male">
<div class="seat-no">17</div>
</div>
</td>
</tr>
<tr>
<td class="seat">
<div class="seat-box available">
<div class="seat-no">18</div>
<div class="seat-optn">
<input type="checkbox" class="b-seat" name="seatno" value="18" price="2141">
</div>
</div>
</td>
</tr>
<tr>
<td class="empty"></td>
</tr>
<tr>
<td class="empty"></td>
</tr>
<tr>
<td class="seat">
<div class="seat-box available">
<div class="seat-no">19</div>
<div class="seat-optn">
<input type="checkbox" class="b-seat" name="seatno" value="19" price="112">
</div>
</div>
</td>
</tr>
<tr>
<td class="seat">
<div class="seat-box female">
<div class="seat-no">20</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<!-- 5th end -->
<!-- 6 -->
<td>
<div style="display:block;clear: both;float:left;">
<table class="table-seatting">
<tbody>
<tr>
<td class="seat">
<div class="seat-box male">
<div class="seat-no">21</div>
</div>
</td>
</tr>
<tr>
<td class="seat">
<div class="seat-box available">
<div class="seat-no">22</div>
<div class="seat-optn">
<input type="checkbox" class="b-seat" name="seatno" value="22" price="223">
</div>
</div>
</td>
</tr>
<tr>
<td class="empty"></td>
</tr>
<tr>
<td class="empty"></td>
</tr>
<tr>
<td class="seat">
<div class="seat-box available">
<div class="seat-no">23</div>
<div class="seat-optn">
<input type="checkbox" class="b-seat" name="seatno" value="23" price="112">
</div>
</div>
</td>
</tr>
<tr>
<td class="seat">
<div class="seat-box female">
<div class="seat-no">24</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<!-- 6 end -->
<!-- 7 -->
<td>
<div style="display:block;clear: both;float:left;">
<table class="table-seatting">
<tbody>
<tr>
<td class="seat">
<div class="seat-box male">
<div class="seat-no">25</div>
</div>
</td>
</tr>
<tr>
<td class="seat">
<div class="seat-box available">
<div class="seat-no">26</div>
<div class="seat-optn">
<input type="checkbox" class="b-seat" name="seatno" value="26" price="112">
</div>
</div>
</td>
</tr>
<tr>
<td class="empty"></td>
</tr>
<tr>
<td class="empty"></td>
</tr>
<tr>
<td class="seat">
<div class="seat-box available">
<div class="seat-no">27</div>
<div class="seat-optn">
<input type="checkbox" class="b-seat" name="seatno" value="27" price="412">
</div>
</div>
</td>
</tr>
<tr>
<td class="seat">
<div class="seat-box female">
<div class="seat-no">28</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<!-- 7 end -->
<!-- 8 -->
<td>
<div style="display:block;clear: both;float:left;">
<table class="table-seatting">
<tbody>
<tr>
<td class="seat">
<div class="seat-box male">
<div class="seat-no">29</div>
</div>
</td>
</tr>
<tr>
<td class="seat">
<div class="seat-box available">
<div class="seat-no">30</div>
<div class="seat-optn">
<input type="checkbox" class="b-seat" name="seatno" value="30" price="112">
</div>
</div>
</td>
</tr>
<tr>
<td class="empty"></td>
</tr>
<tr>
<td class="empty"></td>
</tr>
<tr>
<td class="seat">
<div class="seat-box available">
<div class="seat-no">31</div>
<div class="seat-optn">
<input type="checkbox" class="b-seat" name="seatno" value="31" price="116">
</div>
</div>
</td>
</tr>
<tr>
<td class="seat">
<div class="seat-box female">
<div class="seat-no">32</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<!-- 8 end -->
<!-- 9 -->
<td>
<div style="display:block;clear: both;float:left;">
<table class="table-seatting">
<tbody>
<tr>
<td class="seat">
<div class="seat-box male">
<div class="seat-no">33</div>
</div>
</td>
</tr>
<tr>
<td class="seat">
<div class="seat-box available">
<div class="seat-no">34</div>
<div class="seat-optn">
<input type="checkbox" class="b-seat" name="seatno" value="34" price="223">
</div>
</div>
</td>
</tr>
<tr>
<td class="empty"></td>
</tr>
<tr>
<td class="empty"></td>
</tr>
<tr>
<td class="seat">
<div class="seat-box available">
<div class="seat-no">35</div>
<div class="seat-optn">
<input type="checkbox" class="b-seat" name="seatno" value="35" price="223">
</div>
</div>
</td>
</tr>
<tr>
<td class="seat">
<div class="seat-box female">
<div class="seat-no">36</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<!-- 9 end -->
<!-- 10 -->
<td>
<div style="display:block;clear: both;float:left;">
<table class="table-seatting">
<tbody>
<tr>
<td class="seat">
<div class="seat-box male">
<div class="seat-no">37</div>
</div>
</td>
</tr>
<tr>
<td class="seat">
<div class="seat-box available">
<div class="seat-no">38</div>
<div class="seat-optn">
<input type="checkbox" class="b-seat" name="seatno" value="38" price="223">
</div>
</div>
</td>
</tr>
<tr>
<td class="empty"></td>
</tr>
<tr>
<td class="empty"></td>
</tr>
<tr>
<td class="seat">
<div class="seat-box available">
<div class="seat-no">39</div>
<div class="seat-optn">
<input type="checkbox" class="b-seat" name="seatno" value="39" price="223">
</div>
</div>
</td>
</tr>
<tr>
<td class="seat">
<div class="seat-box female">
<div class="seat-no">40</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<!-- 10 end -->
<!-- 11 -->
<td>
<div style="display:block;clear: both;float:left;">
<table class="table-seatting">
<tbody>
<tr>
<td class="seat">
<div class="seat-box male">
<div class="seat-no">41</div>
</div>
</td>
</tr>
<tr>
<td class="seat">
<div class="seat-box available">
<div class="seat-no">42</div>
<div class="seat-optn">
<input type="checkbox" class="b-seat" name="seatno" value="42" price="223">
</div>
</div>
</td>
</tr>
<tr>
<td class="empty"></td>
</tr>
<tr>
<td class="empty"></td>
</tr>
<tr>
<td class="seat">
<div class="seat-box available">
<div class="seat-no">43</div>
<div class="seat-optn">
<input type="checkbox" class="b-seat" name="seatno" value="43" price="223">
</div>
</div>
</td>
</tr>
<tr>
<td class="seat">
<div class="seat-box female">
<div class="seat-no">44</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<!-- 11 end -->
</tr>
</tbody>
</table>
帮我解决; 我试过了,但是返回0。
$('#btnContinue').on('click', function () {
var totSeatcheck = $('table#table-seatmapping tbody tr').find('input[type=checkbox][name=seatno]:checked"]').length;
alert(totSeatcheck);
return false;
});
答案 0 :(得分:4)
选择器错误。它包含额外的]
。选择器引擎不会抛出错误,它只返回空集合/集合,而空集合上的.length
返回0。
find('input[type=checkbox][name=seatno]:checked"]')
^
使用
find(':checkbox[name="seatno"]:checked')