public class test4 {
    private String recordId; 
    public List<contactwrapper> contactList{get;set;}
    public List<ContactWrapper> wconlist {get;set;}
   // public List<contact> selectedContacts {get;set;}
    public List<contactWrapper> contactWrappersToReturn {get;set;}
    public class contactWrapper{
        public contact con { get; set; }
        public boolean isSelected {get; set;}
    }
    public test4(){
       contactList = new List<contactwrapper>();
        if(Test.isRunningTest()){
            Account obj = [SELECT Id, Name FROM Account LIMIT 1];
            recordId = obj.Id;    
        }else{
            recordId = ApexPages.currentPage().getParameters().get('id');
        }
        contactList.addAll(getcontactWrappers());
    }
    public List<contactWrapper> getcontactWrappers() {
          contactWrappersToReturn = new List<contactWrapper>();      
        List<Contact> conlist = [SELECT ID, LastName,phone,Email from Contact WHERE AccountId=:recordId]; 
       for (Contact conn : conlist ) {
           
           ContactWrapper conWrapper = new ContactWrapper();
          
            conWrapper.con = conn ;          
            contactWrappersToReturn.add(conWrapper);
            system.debug('xyz'+ conWrapper);
        }   
        return contactWrappersToReturn;   
    }      
    public PageReference SendMail(){        
        List<Contact> selectedContacts = new List<Contact>();
        System.debug('==>Inside sendEmail() '+ contactWrappersToReturn);
        for(ContactWrapper c: contactWrappersToReturn) {
            if(c.isSelected == true) {
                selectedContacts.add(c.con);
            }
        }
        System.debug('toaddresses==>'+ selectedContacts);
        String []toAddresses = new List<String>();    
        for(Contact con : selectedContacts) {
            toAddresses.add(con.Email);           
        }
        System.debug('toaddresses==>'+toAddresses);
        Messaging.SingleEmailMessage mail = new Messaging.SingleEmailMessage();
        mail.setToAddresses(toAddresses);
        mail.setSubject('Account related contacts' );
        mail.setHtmlBody('thanks for contacts');
        Messaging.sendEmail(new Messaging.SingleEmailMessage[] { mail });   
        return null;       
    } 
    
}



<apex:page controller="test4" showHeader="false" standardStylesheets="false">
    <apex:form > 
        <apex:pageBlock > 
            <apex:pageBlockButtons location="bottom" >
                <apex:CommandButton value="Send Email" action="{!SendMail}" reRender="table" />
            </apex:pageBlockButtons>    
            <apex:stylesheet value="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css"/>
            <apex:includeScript value="//code.jquery.com/jquery-1.10.2.min.js"/>
            <apex:includeScript value="//cdn.datatables.net/1.10.5/js/jquery.dataTables.js"/>
            <div style="width:80%; margin-left:auto; margin-right:auto; margin-top:50px;">
                <table id="table_id" class="display">
                    <thead>
                        <tr>
                            <th> SelectAll<input id="chktrue" type="checkbox" class="selectAll" checked=""/></th>
                            <th>Contact Name</th>
                            <th>phone</th>
                            <th>Email</th>
                        </tr>
                    </thead>
                    <tbody>
                        <apex:repeat value="{!contactList}" var="conlist">
                            <tr>
                                <td><input type="checkbox"  value="{!conlist.isSelected}"  name="chk{!conlist.con.id}"/></td>
                                <td>{!conlist.con.Lastname}</td>
                                <td>{!conlist.con.phone}</td>
                                <td>{!conlist.con.Email}</td>
                            </tr>
                        </apex:repeat>               
                    </tbody>
                </table>
            </div>
            <script>
            $(document).ready( function () {
                $('#table_id').DataTable();
                $('#chktrue').attr('disabled','true');
            } );            
            (function($) {               
                'use strict';               
                $.fn.extend({
                    checkboxes: function(options) {
                        // Default option
                        var defaults = {
                            itemChild: ''
                        };                        
                        var option = $.extend(defaults, options);
                        // Checked value function
                        function checkedValue(element, bool) {
                            if (bool) {
                                return element.each(function() {
                                    $(this).prop('checked', true);
                                });
                            } else {
                                return element.each(function() {
                                    $(this).prop('checked', false);
                                });
                            }
                            $(":checkbox").click(function(){
                                $("#id").text(this.value)
                            })                            
                        }                        
                        // Return checked or unchecked
                        return this.each(function() {
                            var obj = option,
                                $itemAll = $(this),
                                $itemChild = $('input[name^="' + obj.itemChild + '"]');
                                                        // Checked all checkbox before parent checked load page
                            if ($itemAll.is(':checked')) {
                                checkedValue($itemChild, true);
                            }
                      // Checked all or unchecked checkbox when parent checkbox checked or unchecked
                            $itemAll.change(function() {
                                var $self = $(this);
                                
                                if ($self.is(':checked')) {
                                    checkedValue($itemChild, true);
                                } else {
                                    checkedValue($itemChild, false);
                                }
                            });
                   // Checked parent checkbox when all child checkbox checked
                            $itemChild.change(function() {
                                var flag = true;
                                
                                if (!$itemChild.is(':checked')) {
                                    console.log(!$itemChild.is(':checked'));
                                    $itemAll.prop('checked', false);
                                }
                                
                                $itemChild.each(function() {
                                    var $self = $(this);
                                    if (!$self.is(':checked')) {
                                        flag = false;
                                        return;
                                    }
                                });                               
                                $itemAll.prop('checked', flag);
                            });                           
                        });
                    }
                });
            })(jQuery);           
            $(document).ready(function() {
                $('.selectAll').checkboxes({
                    itemChild: 'chk'
                });
            });
            </script>            
        </apex:pageBlock>  
    </apex:form> 
</apex:page>

..