Look at this sample:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom">
    <xp:eventHandler event="onClientLoad" submit="true"
        refreshMode="norefresh">
    </xp:eventHandler>   
    <xp:br></xp:br>
    <xp:checkBoxGroup id="checkBoxGroup1" defaultValue="0">
        <xp:selectItem itemLabel="checked" itemValue="0"></xp:selectItem>
        <xp:selectItem itemLabel="unchecked" itemValue="1"></xp:selectItem>
        <xp:eventHandler event="onchange" submit="true"
            refreshMode="partial" refreshId="panel1">
        </xp:eventHandler>
    </xp:checkBoxGroup>
    <xp:br></xp:br>
    <xp:br></xp:br>
    <xp:panel id="panel1">
        <xp:panel>
            content of&#160;panel
            <xp:this.rendered><![CDATA[#{javascript:getComponent('checkBoxGroup1').value == "1"}]]></xp:this.rendered><xp:span rendered="false"></xp:span>
        </xp:panel>
    </xp:panel>
    <xp:br></xp:br>
</xp:view>


 

Your 'mypanell' have to be visible (rendered="true", which is the default), but hidden with css (style="display: none;") initially.

Then you can use your code for a client side toggle of visibility.

Also check the right spelling of the IDs you use ( mypanell / mypanel).

Thanks Alexander and Helmut! Wonder why didn't I thought of using display:none when I'm already using it in my CSJS code. Also when I search the web for 'XPages show component when checkbox is checked', all the answers are usually complicated ones involving getvalue() and partial refresh etc. I've read somewhere before that using styling/CSS to show/hide your component isn't really hiding in terms of security which would allow hacker access.

Also, in terms of mimicking real paper form, a checked checkbox will meant 'Yes' and if it's not checked it'll mean 'No' which explains why I'm not using any checkbox group or radio button group controls.

Anyway it works now. Thanks again.