0

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

enter image description here

Individual row check box which is not working

enter image description here

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>

1 Answer 1

3

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.

2
  • Do you know why it is not working if the pass wrapperlist in repeat :
    – Ajay
    Oct 22, 2016 at 17:29
  • @Ajay You'll probably need to post another question with the changed code and detail of exactly what is not working.
    – Keith C
    Oct 22, 2016 at 18:01

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .