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

Javascript validation for if no check box is checked

I have a pageblock table. for every record i'm showing a check box.i want a validation that if no check box is checked i want show alert.
if user selected a check box i'm showing circle/process image for to show end user that some processing is happing. when user is not selected any checked and clicked on submit button i want to show validation using js or jquery(after this i dont want them to show circle/process image ).

my code is like below for button.
<apex:commandButton value="Add Selected"  action="{!selectRecords}" id="sparebtn" reRender=">
                    <apex:actionSupport event="onclick" rerender="resultsBlock" status="statusSaveTrip"/>
public void  selectRecords(){
             for(Wrapper w: spareBomList)
                 system.debug('selected value'+w.isCheckBox);
                     for(integer q=1;q<=w.qty;q++)
Best Answer chosen by lakshman.matti
Zuinglio Lopes Ribeiro JúniorZuinglio Lopes Ribeiro Júnior

First of all, you have to import JQuery to your org as a Static Resource or use an external url to retrieve it. 

Assuming that is a Static Resource you first have to declare it in your VisualForce: 
<apex:includeScript value="{!URLFOR($Resource.JQuery1_11_1)}"  /> (" target="_blank)

After that, you have to initiate JQuery and create a function that will check if there is at least one checkbox selected, otherwise it will show a message warning the user and preventing the submit:
<script type="text/javascript">
        j$ = jQuery.noConflict();

        function isChecked(e) {
            if(j$(".chkSelected:checked").length == 0){
                alert('Select one at least');

The next step is to add to your commandButton your js function:
<apex:commandButton value="Add Selected"  action="{!selectRecords}"  onclick="isChecked(event)"  id="sparebtn" reRender=">
                    <apex:actionSupport event="onclick" rerender="resultsBlock" status="statusSaveTrip"/>

Finally, you will have to add the control style class ".chkSelected" to your apex:inputcheckbox or your input html checkbox:
<apex:inputcheckbox value="{!value}" styleClass="chkSelected" />

That will do the magic. Regards.

Don't forget to mark your thread as 'SOLVED' with the answer that best helps you.