2

我目前正在使用使用 Jinja2 从数据库动态构建的 html 表：

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

4

2 回答 2

2

您首先必须为每个“全选复选框”添加类，以便稍后仅在这些复选框上绑定单击事件。例如，假设您添加了 class="checkall"。

这是一个工作小提琴

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

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

于 2013-04-28T07:06:31.473 回答
1

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

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

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

于 2013-04-28T06:02:50.733 回答