Display/Hide an Empty Table On Click of Javascript Checkbox Using Jquery and Visualforce

Question

I am trying to search anything about automatic rendering of an empty table row for each selected javascript checkbox using jquery and visualforce.

The aim is for every selected row from CustomObj__c, there must be an empty CustomObj2__c table row displayed.

I am thinking in switching to using jquery for the reason that actionsupport didn't work successfully :( Besides, samples from the internet focus more on the object field with checkbox datatype, instead of javascript-made checkbox.

Here's vf page:

<apex:page standardController="CustomObj__c">

    <script type="text/javascript">
        function selectAllCheckboxes(obj,receivedInputID) {
            var inputCheckbox = document.getElementsByTagName("input");
            for(var i=0; i<inputCheckbox.length; i++) {
                if(inputCheckbox[i].id.indexOf(receivedInputID)!=-1) {
                    inputCheckbox[i].checked = obj.checked;
                }
            }
        }
    </script>  

    <apex:pageBlock id="section1" rendered="{!Section1}">
        <apex:pageBlockTable value="{!cList}" var="c">
            <apex:column>
            <apex:facet name="header">
                <apex:inputCheckbox onclick="selectAllCheckboxes(this,'chk')"/>
            </apex:facet>   
            <apex:inputCheckbox value="{!c.IsSelected}" id="chk">
                <apex:actionSupport event="onclick" reRender="section2"/>
            </apex:inputCheckbox> 
            </apex:column> 
            <apex:column>
                <apex:inputField value="{!c.Mobile__c}"/>
            </apex:column>   

        </apex:pageBlockTable>    
    </apex:pageBlock>  

    <apex:pageBlock id="section2" rendered="{!Section2}">
        <apex:pageBlockTable value="{!cList2}" var="c2">
            <apex:column>
                <apex:inputField value="{!c2.CellNo__c}"/>
            </apex:column>   

        </apex:pageBlockTable> 
    </apex:pageBlock>

</apex:page>

*Note: cList2 is an empty table row for another custom object named CustomObj2__c.

As per the jquery part, I'm still not sure on how to do this with visualforce page.

Controller:

public class SampleController {
    private ApexPages.StandardController controller {get;set;}
    public List<CustomObj__c> cList {get;set;}
    public List<CustomObj2__c> cList2 {get;set;}
    public Boolean Section1 {get;set;} 
    public Boolean Section2 {get;set;}

    public SampleController(ApexPages.StandardController con) {
        controller = con;
        Section1 = true;
    }

    public void controllermethod() {
        List<CustomObj2__c> cList2 = new List<CustomObj2__c>();
        cList2.add(new CustomObj2__c()); 
    }

    //other methods....
} 

VF Page

<apex:page standardController="CustomObj__c" extensions="SampleController">

    <script type="text/javascript">
        function selectAllCheckboxes(obj,receivedInputID) {
            var inputCheckbox = document.getElementsByTagName("input");
            for(var i=0; i<inputCheckbox.length; i++) {
                if(inputCheckbox[i].id.indexOf(receivedInputID)!=-1) {
                    inputCheckbox[i].checked = obj.checked;
                }
            }
        }
    </script>  

    <apex:pageBlock id="section1" rendered="{!Section1}">
        <apex:pageBlockTable value="{!cList}" var="c">
            <apex:column>
            <apex:facet name="header">
                <apex:inputCheckbox onclick="selectAllCheckboxes(this,'chk')"/>
            </apex:facet>   
            <apex:inputCheckbox value="{!c.IsSelected}" id="chk">
                <apex:actionSupport event="onclick" reRender="section2" action={!controllermethod}/>
            </apex:inputCheckbox> 
            </apex:column> 
            <apex:column>
                <apex:inputField value="{!c.Mobile__c}"/>
            </apex:column>   

        </apex:pageBlockTable>    
    </apex:pageBlock>  

    <apex:outputPanel id="section2">
    <apex:pageBlock rendered="{!Section2}">
        <apex:pageBlockTable value="{!cList2}" var="c2">
            <apex:column>
                <apex:inputField value="{!c2.CellNo__c}"/>
            </apex:column>   

        </apex:pageBlockTable> 
    </apex:pageBlock>
    </apex:outputPanel>

</apex:page>

Answer 1

You can do this easily When you select the checkbox

<apex:actionSupport event="onclick" reRender="section2" action="{!controllermethod}" />

call controller method and in your controller

public void controllermethod()
{
   cList2.add(new CustomObj2__c())
}

Also put this code in apex:outputpanel and rerender that section

<apex:outputpanel id="section2" >
      <apex:pageBlock rendered="{!Section2}">
        <apex:pageBlockTable value="{!cList2}" var="c2">
            <apex:column>
                <apex:inputField value="{!c2.CellNo__c}"/>
            </apex:column>   

        </apex:pageBlockTable> 
    </apex:pageBlock>
</apex:outputpanel>

PS: If some one select the checkbox and then deselect and then again select it will add blank line every time you need to handle that case as well.

Update your code as

public SampleController(ApexPages.StandardController con) {
        controller = con;
        Section1 = true;
        cList2 = new List<CustomObj2__c>();
    }

    public void controllermethod() {

        cList2.add(new CustomObj2__c()); 
    }