function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Vincent FoxVincent Fox 

check all inputfield checkboxes with one click

Hi there!

I'm very new to visualforce / apex and there's one thing I can't get to work:

I have a simple vf page with two columns of checkboxes and I have to create a button which once being clicked ticks all the checkboxes from unchecked to checked or vise versa.

This is my current code:
<apex:page standardController="Rahmenvertrag_OptIn__c" recordSetVar="rv" standardStylesheets="true">
    
    
    <div class="container1">
        <apex:pageBlock >
        <h1>Rahmenvertrag Teilnehmer-Liste</h1>
        <apex:form id="form1">
            
            
            
            <apex:pageBlockTable value="{! rv }" var="rvt" id="table1">
                
                <apex:column value="{! rvt.KD_TN_EKP__c}" headerClass="tableheader" headerValue="EKP"/>
                <apex:column value="{! rvt.KD_TN_Name__c}" headerClass="tableheader" headerValue="Rahmenvertrag Teilnehmer"/>
                <apex:column value="{! rvt.KD_TN_Adresse__c}" headerClass="tableheader" headerValue="Adresse"/>
                <apex:column>
                    <apex:facet name="header"><span class="tableheader">Einwilligung<br/>Datenaustausch</span></apex:facet>
                    <apex:inputCheckbox value="{! rvt.Datenaustausch__c}"  />
                </apex:column>
                <apex:column >
                    <apex:facet name="header"><span class="tableheader">Einwilligung<br/>Werbliche Ansprache</span></apex:facet>
                    <apex:inputField value="{! rvt.Werbeansprache__c}"  />
                </apex:column>
            </apex:pageBlockTable>
            
            
            
            <br/>
            <table>
                <tr>
                <td ><apex:commandButton action="{!save}" value="Zwischenspeichern"/></td>
                <td><apex:commandButton action="{!save}" value="Änderungen bestätigen" /></td>
                </tr>                    
            </table>
        </apex:form>
    </apex:pageBlock>
        </div>
</apex:page>

Any help would be much appreciated! 
Thanks in advance

Best Answer chosen by Vincent Fox
Foram Rana RForam Rana R
Hi Vincent,

I hope you are doing well .....!!
Please use the below code  just copy and paste in your org and see the functionality and change according to your requirement:
 
<apex:page >
    <html>
        <head>
            <script type="text/javascript">function CheckUncheckAll(){
            var  selectAllCheckbox=document.getElementById("checkUncheckAll");
            if(selectAllCheckbox.checked==true){
                var checkboxes =  document.getElementsByName("rowSelectCheckBox");
                for(var i=0, n=checkboxes.length;i<n;i++) {
                    checkboxes[i].checked = true;
                }
            }else {
                var checkboxes =  document.getElementsByName("rowSelectCheckBox");
                for(var i=0, n=checkboxes.length;i<n;i++) {
                    checkboxes[i].checked = false;
                }
            }
            }
            var flag = false;
            
            function CheckUncheckAll2(){
                var checkboxes =  document.getElementsByName("rowSelectCheckBox");
                if(flag == false ){
                    for(var i=0, n=checkboxes.length;i<n;i++) {
                        checkboxes[i].checked = true;
                        flag = true;
                    }
                } else {
                    for(var i=0, n=checkboxes.length;i<n;i++) {
                        checkboxes[i].checked = false;
                        flag = false;
                    }
                }
               
            }
            </script>
        </head>
        <body>
            <form id="form1" action="dummyAction" method="get">
                <table colspan="2" width="500" border="1" align="left" cellpadding="0" cellspacing="0">
                    
                   <tr>
                        <td><input type="checkbox" name="rowSelectCheckBox" value="1" onClick="CheckUncheckAll()"/></td><td>John Doe</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="rowSelectCheckBox" value="2" onClick="CheckUncheckAll()"/></td><td>Mr Black</td>
                    </tr>
                    <tr bgcolor="#ABB">
                        <td><input type="button" id="checkUncheckAll" value="Click Me" onClick="CheckUncheckAll2()"/></td>
                    </tr>
                </table>
            </form>
        </body>
    </html>
    
</apex:page>


Hope this helps you.
If this helps kindly mark it as BEST ANSWER so that it may help others in the future.

Thanks & Regards,
Foram Rana

All Answers

Foram Rana RForam Rana R
Hi Vincent,

I hope you are doing well .....!!
Please use the below code  just copy and paste in your org and see the functionality and change according to your requirement:
 
<apex:page >
    <html>
        <head>
            <script type="text/javascript">function CheckUncheckAll(){
            var  selectAllCheckbox=document.getElementById("checkUncheckAll");
            if(selectAllCheckbox.checked==true){
                var checkboxes =  document.getElementsByName("rowSelectCheckBox");
                for(var i=0, n=checkboxes.length;i<n;i++) {
                    checkboxes[i].checked = true;
                }
            }else {
                var checkboxes =  document.getElementsByName("rowSelectCheckBox");
                for(var i=0, n=checkboxes.length;i<n;i++) {
                    checkboxes[i].checked = false;
                }
            }
            }
            var flag = false;
            
            function CheckUncheckAll2(){
                var checkboxes =  document.getElementsByName("rowSelectCheckBox");
                if(flag == false ){
                    for(var i=0, n=checkboxes.length;i<n;i++) {
                        checkboxes[i].checked = true;
                        flag = true;
                    }
                } else {
                    for(var i=0, n=checkboxes.length;i<n;i++) {
                        checkboxes[i].checked = false;
                        flag = false;
                    }
                }
               
            }
            </script>
        </head>
        <body>
            <form id="form1" action="dummyAction" method="get">
                <table colspan="2" width="500" border="1" align="left" cellpadding="0" cellspacing="0">
                    
                   <tr>
                        <td><input type="checkbox" name="rowSelectCheckBox" value="1" onClick="CheckUncheckAll()"/></td><td>John Doe</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="rowSelectCheckBox" value="2" onClick="CheckUncheckAll()"/></td><td>Mr Black</td>
                    </tr>
                    <tr bgcolor="#ABB">
                        <td><input type="button" id="checkUncheckAll" value="Click Me" onClick="CheckUncheckAll2()"/></td>
                    </tr>
                </table>
            </form>
        </body>
    </html>
    
</apex:page>


Hope this helps you.
If this helps kindly mark it as BEST ANSWER so that it may help others in the future.

Thanks & Regards,
Foram Rana
This was selected as the best answer
Vincent FoxVincent Fox
Hi Rana, 
thanks for your help, it is really appreciated.
In general your code does work but I can't get it to work with my <apex:inputCheckbox> elements.
For those elements the attribute type name is not supported so I gave them the id="rowSelectCheckBox".
But the javascript seems like it can't find the checkboxes or something else won't work.
You can find attached my whole code as it is right now. It would be really nice if you could work off of that and help me get this thing to work!

Thanks from germany :)
<apex:page standardController="Rahmenvertrag_OptIn__c" recordSetVar="rv" standardStylesheets="true">
    <style>
        html .brandQuaternaryBgr{
    		background-color: white !important;
		}
        @font-face {
        	font-family: 'Delivery';
        	src: url(/resource/Delivery_W_Rg);
        }
        
        @font-face {
        	font-family: 'Delivery Headline';
        	src: url(/resource/Delivery_CdBlk);
        }
        
        .form1{
            background-color: blue;
            font-size: 28;
        }
        
        h1{
            font-family: "Delivery Headline";
            font-size: 28px;
		}  
        
        .container1 {
            background-color: white;    
        	height: 1000px;
            width: 100%;
        }
        
        .textbody {
        	font-family: "Delivery";
        	font-size: 14px;
        }
        
        .tableheader {
        	font-family: "Delivery Headline";
        }
        
    </style>
    <script>
    	function CheckUncheckAll(){
            var selectAllCheckbox=document.getElementById("checkUncheckAll");
            if(selectAllCheckbox.checked==true){
                var checkboxes =  document.getElementsById("rowSelectCheckBox");
                for(var i=0, n=checkboxes.length;i<n;i++) {
                    checkboxes[i].checked = true;
               		}
            	}	else {
                var checkboxes =  document.getElementsById("rowSelectCheckBox");
                for(var i=0, n=checkboxes.length;i<n;i++) {
                    checkboxes[i].checked = false;
                	}
            	}
            }

            var flag = false;
            function CheckUncheckAll2(){
                var checkboxes =  document.getElementsById("rowSelectCheckBox");
                if(flag == false ){
                    for(var i=0, n=checkboxes.length;i<n;i++) {
                        checkboxes[i].checked = true;
                        flag = true;
                    	}
                	} else {
                    for(var i=0, n=checkboxes.length;i<n;i++) {
                        checkboxes[i].checked = false;
                        flag = false;
                    	}
                	}
            	}
    </script>
    
    <div class="container1">
        <apex:pageBlock >
        <h1>Rahmenvertrag Teilnehmer-Liste</h1>
        <apex:form styleClass="textbody" id="form1">
        	
            <p>
                UserID: {!$User.Id}
                User Mail: {!$User.Email}
            </p>
            
            <apex:pageBlockTable value="{! rv }" var="rvt" id="table1">
                
                <apex:column value="{! rvt.KD_TN_EKP__c}" styleClass="textbody" headerClass="tableheader" headerValue="EKP" />
                <apex:column value="{! rvt.KD_TN_Name__c}" styleClass="textbody" headerClass="tableheader" headerValue="Rahmenvertrag Teilnehmer"/>
                <apex:column value="{! rvt.KD_TN_Adresse__c}" styleClass="textbody" headerClass="tableheader" headerValue="Adresse"/>
                <apex:column>
                    <apex:facet name="header"><span class="tableheader">Einwilligung<br/>Datenaustausch</span></apex:facet>
                    <apex:inputCheckbox value="{! rvt.Datenaustausch__c}" styleClass="textbody" />
                </apex:column>
                <apex:column >
                    <apex:facet name="header"><span class="tableheader">Einwilligung<br/>Werbliche Ansprache</span></apex:facet>
                    <apex:inputCheckbox value="{! rvt.Werbeansprache__c}" styleClass="textbody" id="rowSelectCheckBox"/>
                </apex:column>
                </apex:pageBlockTable>
            
            
            
            <br/>
            <table>
                <tr>
                <td style="padding-right: 20px;"><apex:commandButton action="{!save}" value="Zwischenspeichern"/></td>
                <td style="padding-right: 20px;"><apex:commandButton action="{!save}" value="Änderungen bestätigen" /></td>
                <td style="padding-right: 20px;"><input type="button" id="checkUncheckAll" value="Click Me" onClick="CheckUncheckAll2()"/></td>
				</tr>                    
            </table>
        </apex:form>
    </apex:pageBlock>
        </div>
</apex:page>

 
Vincent FoxVincent Fox
I've solved the issue by replacing the lines 7, 12 and 21 " var checkboxes =  document.getElementsByName("rowSelectCheckBox"); "
with  "var checkboxes =  document.getElementsByTagName("input");".
Thanks!
Foram Rana RForam Rana R
Happy to hear 🙂