I'm with Eric on using jQuery here. (You could also use Visualforce's re-render mechanism but the usability is not great because of the time delays.)
You can express the relationship between the checkboxes using styleClass
attributes (that result in class
attributes in the HTML). These don't have any associated CSS styling; they just act as markers without some of the problems of using ID values:
<apex:inputCheckBox value="{!o.checkbox1__c}" styleClass="checkbox1" ... />
<apex:inputCheckBox value="{!o.checkbox11__c}" styleClass="dependsOnCheckbox1" ... />
<apex:inputCheckBox value="{!o.checkbox12__c}" styleClass="dependsOnCheckbox1" ... />
<apex:inputCheckBox value="{!o.checkbox13__c}" styleClass="dependsOnCheckbox1" ... />
<apex:inputCheckBox value="{!o.checkbox2__c}" styleClass="checkbox2" ... />
<apex:inputCheckBox value="{!o.checkbox21__c}" styleClass="dependsOnCheckbox2" ... />
<apex:inputCheckBox value="{!o.checkbox22__c}" styleClass="dependsOnCheckbox2" ... />
<apex:inputCheckBox value="{!o.checkbox23__c}" styleClass="dependsOnCheckbox2" ... />
The jQuery logic is added at the end of the page just before the closing </apex:page>
tag:
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"/>
<script>
var j$ = jQuery.noConflict();
j$(document).ready(function() {
for (var i = 1; i <= 2; i++) {
j$('input.checkbox' + i).change(function() {
var checked = j$(this).is(":checked");
j$('input.dependsOnCheckbox' + i).prop('checked', !checked);
});
}
});
</script>
When the document has loaded, jQuery adds listeners to the checkboxes based on their class names. This allows the JavaScript to be kept separate from the elements in the page. For each naming pattern, a listener that responds to the checkbox changing by changing the related set of checkboxes (as jQuery handles the iteration automatically) is added.
I haven't tested this so if you do use it check the JavaScript console for errors and fix any that come up. You can also use console.log
to output debug information to the JavaScript console - see How do I start to debug my own Visualforce/JavaScript? for more detail on that.