Question

我目前正在使用html表使用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 %}

我希望添加按行选择所有内容的功能。

要明确

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的新手，并希望偶然发现一个针对这个特定案例的插件或简单的教程。我可能需要丢失表格，因为我的数据不是必需的表格，在这种情况下我可以使用任意数量的examples with fieldsets更有经验的Jquery用户建议什么？

Answer 1

首先必须为每个“全选复选框”添加类，以便稍后只能在这些复选框上绑定click事件。让我们假设您添加class =“checkall”，例如。

Here is a working fiddle

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

在Logan的回答中，您只能单击“全选”复选框一次，以后不能取消选择，因为值（true）是硬编码的。我认为你应该使用this.checked。

Answer 2

假设复选框位于同一行，您希望将dom路径向上遍历到包含tr。从那里你想要找到所有的复选框并将它们标记为已选中。

$('.row-check-all-input').on('click', function(){
  $(this).parents('tr').find('input[type="checkbox"]').prop('checked', true); 
});

JSFiddle中的示例：http://jsfiddle.net/2bF3D/

使用复选框/按钮使用Jquery检查表行中的所有复选框

2 个答案: