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

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

{% extends "base.html" %} {% block content %} 
 
 
 
  {% 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) %} 
 {% else %} 
 {% endif %} {% endfor %} 
 
Please select the survey sections you would like to complete
  
 
Organization
 
Survey Header
 
Period name
 
Completed
 
Due
 
check all
 
1
 
2
 
3 
 
4
 
5
 
6
 
7
 
8
 
9
 
10
 
11
 
12
 
13
 
14
 
15
 
16
 
17
 
 
{{ survey_table.organization }}
 
{{ survey_table.survey_header }}
 
{{ survey_table.period_name }}
 
{{ survey_table.completed }}
 
{{ survey_table.due }}
 
 
 
 
  
 {% endblock %} 

我希望添加按行选择所有function。

要明确

 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用户建议什么？

Answer 1

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

这是一个工作小提琴

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

在Logan的回答中，您只能单击select all复选框一次，以后不能取消选择，因为value（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/