Bootstrap Select All check box in apex:repeat

Question

I have a page with bootstrap Checkbox. The select All is working fine, however each row wise select check box is not working properly. only first row checkbox is selected and unselected. If I click on any other row check box, it will check the first row checkbox only.

<table id="domainTable"> <!-- Added ID -->
<thead>
<tr>
   <th>         
         <div class="checkbox checkbox-primary">
           <input type="checkbox" name="selectAll" id="selectAllDomainList" checked=""/>
               <label for="selectAllDomainList">
                            Select All
                        </label>
         </div>
    </th>
</tr>
</thead>
<tbody>
     <apex:variable value="{!1}" var="rowNum"/> 
          <apex:repeat value="{!accList}" var="e">  
               <tr> 
                  <td> 
                      <div class="checkbox checkbox-primary">
                                    <input id="Text{!rowNum}" type="checkbox" checked=""/>
                                    <label for="Text{!rowNum}">
                                        Primary
                                    </label>
                                </div>
                            </td>                                                                                                                         
                  <td><apex:outputText value="{!e.name}" /></td>   
                        </tr>                                             
             <apex:variable value="{!1}" var="rowNum"/> 
       </apex:repeat>
</tbody>

JavaScript

<script>

  // on document ready
    jQuery(function($){  

        $('#selectAllDomainList').click (function () {
             var checkedStatus = this.checked;
            $('#domainTable tbody tr').find('td:first :checkbox').each(function () {
                $(this).prop('checked', checkedStatus);
             });
        });
    });

Select All which is working

Individual row check box which is not working

Only first row i can select or deselect.

with WrapperList:

<tbody>
                         <apex:variable value="{!1}" var="rowNum"/> 
                              <apex:repeat value="{!wrapList}" var="e">  
                                   <tr> 
                                      <td> 
                                          <div class="checkbox checkbox-primary">
                                                        <input id="Text{!rowNum}" type="checkbox" checked=""/>
                                                        <label for="Text{!rowNum}">
                                                            Primary
                                                        </label>
                                                    </div>
                                                </td>                                                                                                                         

                                      <!--<td><apex:outputText value="{!e.name}" /></td>!-->   
                                          <td><apex:outputText value="{!e.eng.name}" /></td>

                                            </tr>                                             
                                 <apex:variable var="rowNum" value="{! rowNum + 1 }"/> 
                           </apex:repeat>
                    </tbody>

Answer 1

One problem is that you are using the same Id value for all of the checkboxes:

<input id="Text{!rowNum}" type="checkbox" checked=""/>
<label for="Text{!rowNum}">

because you are failing to increment the rowNum variable. So when any label is clicked on, it is the first checkbox with the Id that is selected.

To fix that change the apex:variable at the bottom of the loop to increment:

<apex:variable var="rowNum" value="{! rowNum + 1 }"/>

so the Id values are unique and the selection works.