use a checkbox/button to check all the checkboxes in a table row using Jquery

Question

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.

to be explicit

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] [ ] [ ] [ ] [ ]

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?

uross · Accepted Answer · 2013-04-28 07:06:31Z

2

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.

Here is a working fiddle

$(".checkall").click(function(){
$(this).parents('tr').find(':checkbox').prop('checked', 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.

answered Apr 28, 2013 at 7:06

uross

4315 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Logan Bailey · Accepted Answer · 2013-04-28 17:18:29Z

1

Assuming the checkbox is in the same row, you want to traverse the dom path upwards to the containing tr. From there you want to find all checkboxes and mark them as checked.

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

Example in JSFiddle: http://jsfiddle.net/2bF3D/

edited Apr 28, 2013 at 17:18

answered Apr 28, 2013 at 6:02

Logan Bailey

7,1677 gold badges38 silver badges45 bronze badges

1 Comment

Drew Verlee Over a year ago

I tried to play with the code you added, i think i understand it for the most part. Still when i added it i couldn't get the desired behavior (nothing happened) here is a look at the page source: bpaste.net/show/94783

Collectives™ on Stack Overflow

use a checkbox/button to check all the checkboxes in a table row using Jquery

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related