3

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?

  • Could you try to edit the question and try to explain this in a bit more detail. I really cannot tell what you are looking to do. – Chris Duncombe Dec 5 '14 at 13:55
  • Validation rules cannot modify entered data. They only tell the user when the data doesn't conform to your specifications. Does that meet your need? If you want to automatically change the data, you can use workflow rules. – Thomas Taylor Dec 10 '14 at 2:10
3

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.

| improve this answer | |
1

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);"/>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.