Document GetElementById

Question

I have a VF Page where I wanted to get the record details when I check the checkbox. So I am trying to achieve this through javascript.

Here is the call the Javascript on click of 'Ok' button.

<apex:pageBlockButtons location="bottom">
            <div align="Right" draggable="false">
                    <apex:commandButton value="Ok" id="selectEmp" onClick="selectAllEmployees();">
                    </apex:commandButton>
                    <apex:commandButton value="Cancel" onclick="window.top.close()" />
            </div>
        </apex:pageBlockButtons>

function selectAllEmployees() {                     
        var selectedbox = document.getElementsByTagName('input');
        var checkboxesChecked = [];
        var selectedNames = [];
        for(var i=0; i<selectedbox.length; i++) {
            if(selectedbox[i].type == "checkbox") {
                if(selectedbox[i].checked){
                  alert('inside if'+selectedbox[i].checked); //It is retriving value as true on this alert
                  var fname = document.getElementsById('{!$Component.employeeLookupPage.EmployeeForm.employeeList.employeeBlock.tblResults.fname}').value;
                  alert(fname); //I am not able to get the value of First name here.
                   selectedNames.push(fname);
                }
            }
        }           
}

Answer 1

$Component doesn't play well when you put the values in any sort of data table, so you need to get creative.

Personally, I'd just drop the value directly on to the checkbox:

<apex:inputCheckbox value="{!row.selected}" html-data-first-name="{!row.record.FirstName}" />

[].forEach.call(document.querySelectorAll('input:checked'),
    function(v) { alert(v.dataset.firstName); });

This is the least error-prone method for what you're attempting to do, and should be supported by any browser that Salesforce supports.