Uncheck checkboxes by changing particular checkbox state

Question

I have custom fields in contacts form named checkbox1__c, checkbox11__c, checkbox12__c, checkbox13__c.

When I check checkbox1__c then I want checkbox11__c, checkbox12__c, checkbox13__c to be unchecked.

When I unchecked checkbox1__c then I want checkbox11__c, checkbox12__c, checkbox13__c to be checked.

Is there any way to do this by using validation-rules? If not no way to this by validation-rules, then what is the best way to do this?

Answer 1

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.

Answer 2

Here is what I have used using jQuery

JS Code:

function oneCheck(a){

    $('.isSelected').removeClass("isSelected");


if($(a).is(":checked")){
    $(a).addClass("isSelected");
}

$(".chk").each(function() {

    if($(this).hasClass('isSelected') == false){
        $(this).removeAttr("checked");            
    }else{
        $(this).attr("checked","checked");
       }
    });
}

Then in the VF page for the checkbox I used:

        <apex:inputCheckBox value="{!qte.isSelected}" styleClass="chk" onclick="oneCheck(this);"/>