master check box to select all records

Question

i am new to salesforce. I am facing a problem like i have pageblock table in my visualforce page and i provide checkbox to each and every record so user can delete one or multiple records at a time.Now my requirement is to provide a master checkbox before all record rows means if user selects that all records will be selected to delete.Please provide me a suggestion to implement in my code.I had already working in it,If i post any wrong question please don't flag like bad please help me

My visualforce page code

<apex:page standardController="Experiment__c" extensions="SampleCheckbox" >
    <apex:form >
        <apex:pageBlock title="Experiment Details">
            <apex:pageBlockButtons >
                <apex:commandButton value="Find" action="{!find}" reRender="searchlist"/>
            </apex:pageBlockButtons>
            <apex:pageblockSection >
                <apex:inputfield value="{!Experiment__c.Name}"/>
            </apex:pageblockSection>
        </apex:pageBlock>
        <apex:pageBlock id="searchlist" title="Experiment details">
            <apex:pageBlockTable value="{!memlist}" var="mem">
                <apex:column >
                <apex:inputCheckbox value="{!mem.checked}"/>
                </apex:column>
                <apex:column value="{!mem.expwc.Name}" title="Member Name" />
                <apex:column value="{!mem.expwc.email__c}" title="E-Mail Id"/>
                <apex:column value="{!mem.expwc.mobile__c}" title="mobile"/>
            </apex:pageBlockTable>
            <apex:pageblockButtons >
                <apex:commandButton value="Delete" action="{!del}" reRender="searchlist"/>
            </apex:pageblockButtons>      
        </apex:pageBlock>
    </apex:form>
</apex:page>

My controller

public class SampleCheckbox {
    public List<Experiment__c> explist{set;get;}
    public List<mem> memlist{get;set;}
    public Experiment__c exp;
    public List<Experiment__c> memdellist; 
    public Boolean checked{set;get;}
    //public Boolean show{set;get;}

    public SampleCheckbox(Apexpages.StandardController controller) {
        exp=(Experiment__c)controller.getRecord();
    }
    public class mem {
        public Experiment__c expwc{get;set;}
        public Boolean checked {get;set;}
        public mem(Experiment__c e,Boolean b) {
            expwc=e;
            checked=b;
        }
    }
    public void find() {
        //show=true;
        String nam=exp.Name;
        memlist=new List<mem>();
        if(memlist == null) {
            memlist=new List<mem>();
        }
        String sql='SELECT Name,light_weight__email__c,light_weight__mobile__c FROM 
        Experiment__c WHERE Name LIKE \'%'+nam+'%\'';
        explist=Database.query(sql);
        for(Experiment__c e:explist) {
            mem mo=new mem(e,false);
            memlist.add(mo);
        }
    }
    public void del() {
        memdellist=new List<Experiment__c>();
        for(mem m:memlist) 
        {
            if(m.checked==true) 
            {
                if(memdellist==null) 
                {
                    memdellist=new List<Experiment__c>();      
                }
                memdellist.add(m.expwc);
            }
        }
        delete memdellist;
        find();
    }
}

Answer 1

Given this component:

<apex:component >

<script>
function cvCheckAllOrNone(allOrNoneCheckbox) {

    // Find parent table
    var container = allOrNoneCheckbox;
    while (container.tagName != "TABLE") {
        container = container.parentNode;
    }

    // Switch all checkboxes
    var inputs = container.getElementsByTagName("input");
    var checked = allOrNoneCheckbox.checked;
    for (var i = 0; i < inputs.length; i++) { 
        var input = inputs.item(i);
        if (input.type == "checkbox") {
            if (input != allOrNoneCheckbox) {
                input.checked = checked;
            }
        }
    }
}
</script>

<apex:inputCheckbox onclick="cvCheckAllOrNone(this)" title="Toggle All Rows"/>

</apex:component>

you can add a checkbox to the header row of your checkbox column that uses it to check all or none of the checkboxes:

<apex:column >
    <apex:facet name="header">
        <c:CheckAllOrNone />
    </apex:facet>
    <apex:inputCheckbox value="{!mem.checked}"/>
</apex:column>

As this runs at the client side it is nice and quick.