javascript - 如何获取表格中选中的复选框的总数-6ren

javascript - 如何获取表格中选中的复选框的总数

转载作者：行者123 更新时间：2023-11-28 15:16:21

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

最佳答案

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

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

使用

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

关于javascript - 如何获取表格中选中的复选框的总数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33733551/

文章推荐： javascript - 如何在reactjs es6中删除监听器

文章推荐： javascript - JQuery 检查域名是否包含 .com 或 .net

文章推荐： javascript - 追加()；单击按钮后jquery添加div

文章推荐： javascript - 如何在 ajax 请求中保持代码干燥？

javascript - 复选框单击脚本 - [SHIFT] 选中/取消选中范围，[CTRL] 选中/取消选中所有 - 基于选择名称？
谁知道现成的脚本或插件提供: -Shift click for check/uncheck all in range -CTRL click to select or unselect all 这可以
javascript - 选中/取消选中输入不起作用
如果您点击按钮，它会打开 3 个复选框(一个选择全部，还有两个子输入)。我想做的是，如果用户点击Centro de dia，输入将保持选中状态，而另一个(在本例中为button)会被选中未经检查。如
javascript - 选中/取消选中所有按钮有什么问题？
我正在学习 Wes Bos 30 天 Javascript 类(class)，在一项可选功能上，我需要在底部添加三个按钮:清除全部、选中全部和取消选中全部。这是代码
jquery 选中/取消选中复选框列表
自从升级到 jquery 1.9 以来，我的脚本停止了检查/取消选中复选框的工作。我有一个主复选框，用于控制选择/检查表中的复选框列表。升级到新的 jquery 版本后，仅最初单击“检查全部”复选框
jquery - 选中/取消选中表格中的所有复选框
我有一个带有复选框列的表格，我添加了以下内容: 这是我的 jQuery 函数: jQuery(document).ready(function() { jQuery('#selec
jquery - 选中/取消选中复选框数组
这是我所拥有的(此处使用 Twitter bootstrap) #html fdsfdsfds
jquery 选中/取消选中复选框
这个问题已经有答案了: Setting "checked" for a checkbox with jQuery (44 个回答) 已关闭 6 年前。当我单击“问题”时，必须选择/取消选择两个复选框
jQuery:选中/取消选中复选框时更改下拉选择
我有这个表格: First Second Third --- Option1 Option2 有没有办法(使用 JS/jQuery)我可以在 First 时将 first
jquery - 选中/取消选中所有复选框
我试图有一个复选框来选中/取消选中所有其他复选框。我正在使用此代码: $("#checkall").toggle( function () { $(".kselItems
javascript - 选中/取消选中复选框列表中的所有项目时的奇怪行为
在复选框列表中，应该可以通过按下按钮来选中/取消选中所有项目。但是下面的代码只能部分工作: All None
c# - 如何确定复选框列表被选中/选中 -
当我执行代码时，我得到 4 个复选框，我检查/选择了所有 4 个复选框，当我尝试调试代码时，它确实算作我有 4 个复选框，但所有 4 个复选框都被选中 = false。我在代码中缺少什么？ Li
javascript - 选中/取消选中单选按钮
$("input[type='radio']").each(function() { if ($(this).is(":checked")) { $(this).css('backgrou
javascript - 选中/取消选中复选框时更改相应标签的文本
我无法使用此 javascript 函数。任何帮助将不胜感激! No function yesno(thecheckbox, thelabel){ var ch
Javascript 选中/取消选中所有复选框并将值写入文本区域
这是我的第一个 js 脚本，请对我温柔点:) 问题是当我点击选中所有按钮时，所有复选框都被选中但它不会将值写入文本区域，如果我单击单个复选框然后值被添加/删除并且没关系，我只是卡住了在那个选中所有/取
javascript - 选中/未选中的复选框
我试图在复选框处于选中状态或未选中状态时传递一个值。但是，它似乎没有通过非检查状态。我正在使用的代码如下: if (document.getElementById('PRODUCT_REVIEW_E
javascript - 选中/取消选中除一个复选框之外的所有复选框。？
目前我正在使用它来选中/取消选中表单中的所有复选框。 checked=false; function checkedAll (frm1) { var aa= document.getElem
javascript - 选中/取消选中单选按钮并在取消选中时隐藏选项
我有 2 个单选按钮，当我单击其中一个按钮时，我会看到下拉菜单，必须在其中选择金额。到目前为止，我能够检查/取消检查它们，但问题是，当我取消检查单选按钮下拉列表时，不会再次隐藏。我不太擅长 Jav
javascript - 选中/取消选中复选框
HTML: Select All 1. 2. 3. 4. 5. JS: function test(click
javascript - 选中/取消选中所有复选框并添加值
我需要为每套图书设置一个选中/取消选中全部复选框。它还应该加上总价和重量。到目前为止，我只能选中每个框，它会很好地添加值，但是一旦我添加一个函数来选中所有框，一切都会停止工作。 //check all
javascript - 选中/取消选中复选框取决于数据来自数据库
我正在尝试根据来自 mysql 数据库的数据来选中或取消选中复选框。我使用nusoap webservice/webclient读取数据，数据值可以是1或0。我的代码是: functio

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何获取表格中选中的复选框的总数