如何在表格中选中复选框的总数

时间:2015-11-16 10:51:06

标签: javascript jquery html

我的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;
});

1 个答案:

答案 0 :(得分:4)

选择器错误。它包含额外的]。选择器引擎不会抛出错误,它只返回空集合/集合,而空集合上的.length返回0。

find('input[type=checkbox][name=seatno]:checked"]')
                                                ^

使用

find(':checkbox[name="seatno"]:checked')