当前位置: 首页 > 面试题库 >

如何使用jQuery选择所有复选框?

余铭晨
2023-03-14
问题内容

我需要有关jQuery选择器的帮助。假设我有一个标记,如下所示:

<form>

  <table>

    <tr>

      <td><input type="checkbox" id="select_all" /></td>

    </tr>

    <tr>

      <td><input type="checkbox" name="select[]" /></td>

    </tr>

    <tr>

      <td><input type="checkbox" name="select[]" /></td>

    </tr>

    <tr>

      <td><input type="checkbox" name="select[]" /></td>

    </tr>

  </table>

</form>

除了#select_all用户单击时,如何获取所有复选框?


问题答案:

一个更完整的示例适用于您的情况:

$('#select_all').change(function() {

  var checkboxes = $(this).closest('form').find(':checkbox');

  checkboxes.prop('checked', $(this).is(':checked'));

});


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>

  <table>

    <tr>

      <td><input type="checkbox" id="select_all" /></td>

    </tr>

    <tr>

      <td><input type="checkbox" name="select[]" /></td>

    </tr>

    <tr>

      <td><input type="checkbox" name="select[]" /></td>

    </tr>

    <tr>

      <td><input type="checkbox" name="select[]" /></td>

    </tr>

  </table>

</form>

#select_all被点击复选框,该复选框的状态进行检查,并在当前形式的所有复选框被设置为相同的状态。

请注意,您无需#select_all从选择中排除该复选框,因为该复选框的状态将与其他所有复选框相同。如果出于某些原因确实需要排除#select_all,则可以使用以下方法:

$('#select_all').change(function() {

  var checkboxes = $(this).closest('form').find(':checkbox').not($(this));

  checkboxes.prop('checked', $(this).is(':checked'));

});


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>

  <table>

    <tr>

      <td><input type="checkbox" id="select_all" /></td>

    </tr>

    <tr>

      <td><input type="checkbox" name="select[]" /></td>

    </tr>

    <tr>

      <td><input type="checkbox" name="select[]" /></td>

    </tr>

    <tr>

      <td><input type="checkbox" name="select[]" /></td>

    </tr>

  </table>

</form>


 类似资料:
  • 我使用jQuery Datatables插件来显示数据。它提供分页、搜索、排序等功能,所以每次我只在当前页面上显示10条记录。如果我点击next或page number(由Bootstrap Datatable提供),将显示另外10条记录。正如问题中提到的,我想从所有页面中选择所有复选框。

  • 问题内容: 我不知道如何传递复选框的选定值。任何帮助或建议对我都会有很大帮助。 到目前为止,这是我的代码,我一直无法传递复选框的值 问题答案: 试试这个。 HTML代码 loadmore.php代码 在loadmore.php中输出 而已。 干杯。

  • 问题内容: 使用核心jQuery,如何删除选择框的所有选项,然后添加一个选项并选择它? 我的选择框如下。 编辑:以下代码有助于链接。但是,(在Internet Explorer中)未选择添加的选项。(我确实在和中都使用了相同的“值” 。) 编辑:试图使其模仿此代码,每当重置页面/窗体时,我都使用以下代码。该选择框由一组单选按钮填充。距离更近,但是未像使用时那样显示选择的选项。我现有的代码没什么错-

  • 我有一些连接的选择工作良好。顺便说一句,我想把这些选择转换成很小的选择,但我发现这样做有些困难。例如,我有一个ID为的select。当我选择的一个大于零的选项时,应该会出现其他选择。之后,当我更改级联选择的选项(例如在中)时,该选项会正确更改。但是,当我选择另一次时,中的选项zero和我选择另一次时,中大于zero的选项会出现,而另一次选择中已经选择了选项。 这是我的javascript代码: 这

  • 我想调用一个函数时,选择的任何选项。类似于这样: 但不知何故不起作用。有人能帮忙吗。 请注意 我不想捕获更改事件,如果我选择已经选择选项,则不会触发更改事件

  • 我有一个超文本标记语言选择框,在我的jsp中启用了多选择。我从其他按钮动态填充选项。因此,用户不会从该选择框中选择任何值。我必须将selectbox的所有值传递给其他jsp。 我正在使用表单操作提交浏览jsp。这样做时,我无法获得所有的选择框值。 此选项仅提供该多选框中的选定值。我想要的是从selectbox中获取所有值,无论是否选中。 谢谢