使用复选框/按钮使用Jquery检查表行中的所有复选框 [英] use a checkbox/button to check all the checkboxes in a table row using Jquery

问题描述

我当前正在使用html表 使用Jinja2从数据库动态构建:

I'm currently using a html table dynamically built from a database using Jinja2:

{% extends "base.html" %}
{% block content %}


  <form action="#" method="POST" accept-charset="utf-8" id="myForm">
      <div><label><input id="master" type="checkbox" ></label></div>
    <fieldset id ="slaves">
    <div class="table">
    <table cellspacing="0" table id="table">
      <caption>Please select the survey sections you would like to complete</caption>
      <colgroup span="19"></colgroup>
        <tr>
          <th scope="col">Organization</th>
          <th scope="col">Survey Header</th>
          <th scope="col">Period name</th>
          <th scope="col">Completed</th>
          <th scope="col">Due</th>
          <th scope="col">check all</th>
          <th scope="col">1</th>
          <th scope="col">2</th>
          <th scope="col">3 </th>
          <th scope="col">4</th>
          <th scope="col">5</th>
          <th scope="col">6</th>
          <th scope="col">7</th>
          <th scope="col">8</th>
          <th scope="col">9</th>
          <th scope="col">10</th>
          <th scope="col">11</th>
          <th scope="col">12</th>
          <th scope="col">13</th>
          <th scope="col">14</th>
          <th scope="col">15</th>
          <th scope="col">16</th>
          <th scope="col">17</th>
        </tr>
        {% set oshp = (0,0,0) %}
        {% set start = True %}
          {% for  survey_table in survey_tables %}


            {% if survey_table.completed != None %}
                {% set color = "#DCF8FF" %}
            {% else %}
                {% set color = "#FFEBF4" %}
            {% endif %}


            {% if oshp != (survey_table.organization, survey_table.survey_header,
                survey_table.period_name)  %}
                {% set oshp = (survey_table.organization, survey_table.survey_header,
                survey_table.period_name)  %}
                <tr>
                    <td>{{ survey_table.organization }}</td>
                    <td>{{ survey_table.survey_header }}</td>
                    <td>{{ survey_table.period_name }}</td>
                    <td>{{ survey_table.completed }}</td>
                    <td>{{ survey_table.due }}</td>

                    <div><label><td BGCOLOR="{{ color }}"><input type="checkbox"  name="{{ survey_table.user_survey_section_id}}" value="{{ survey_table.user_survey_section_id  }}" title= "{{ survey_table.survey_section }}" ><label></td></div>
            {% else %}
            <div><label><td BGCOLOR="{{ color }}"><input type="checkbox"  name="{{ survey_table.user_survey_section_id}}" value="{{ survey_table.user_survey_section_id  }}" title= "{{ survey_table.survey_section }}" ></td></label></div>
            {% endif %}
          {% endfor %}
                </tr>
    </table>
    </div>
    </fieldset>
    <input class="bigbutton" type="submit" value="Submit" >
  </form>


{% endblock %}

我希望增加按行选择所有内容的功能.

I'm looking to add the ability to select all by row.

明确

row 1[select all button] [ ] [ ] [ ] [ ]
row 2[select all button] [ ] [ ] [ ] [ ]

if row 1 selected all button clicked:
row 1[select all button] [x] [x] [x] [x]
row 2[select all button] [ ] [ ] [ ] [ ]

我是jquery的新手，希望偶然发现针对此特定情况的插件或简单教程.我有可能需要丢失表格，因为我的数据不是必需的表格，在这种情况下，我可以使用任意数量的带有字段集的示例有经验的Jquery用户建议什么?

I'm new to jquery and was hoping to stumble across a plugin or a simple tutorial directed at this specific case. Its possible that i need to lose the table as my data isn't necessary tabular, in which case i could use any number of examples with fieldsets What do more experienced Jquery users suggest?

推荐答案

您首先必须将类添加到每个全选复选框"，以便以后可以仅在这些复选框上绑定单击事件.假设您添加了class ="checkall".

You first have to add class to every "select all checkbox", so you can later bind click event only on those checkboxes. Lets say you add class="checkall", for example.

这是工作中的小提琴

$(".checkall").click(function(){
$(this).parents('tr').find(':checkbox').prop('checked', this.checked);
});

在洛根(Logan)的回答中，您只能单击一次全选"复选框，并且以后无法取消选择，因为值(true)是硬编码的.我认为您应该改用this.checked.

In answer from Logan, you can only click the select all checkbox once and it can`t be deselected later, because value (true) is hardcoded. I think you should use this.checked instead.

这篇关于使用复选框/按钮使用Jquery检查表行中的所有复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！