Show hide fields based on 2 checkboxes | Community
Skip to main content
P
priyak-1
Level 3
July 17, 2023
Solved

Show hide fields based on 2 checkboxes

  • July 17, 2023
  • 1 reply
  • 2362 views

Hello All,

 

I have 2 checkboxes, if either of my checkbox is true, I should show same set of fields. 

I have tried using granite:class by giving space separated 2 classes but no luck. Does anyone have any idea what I'm missing here.

 

Thanks in Advance!

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by priyak-1

@priyak-1 Can you please share with the community how did you get this working? How issue got resolved? This would help in posterity. 


sure @kautuk_sahni 

 

For checkbox1 I have granite class as cq-dialog-new-checkbox-showhide.

For checkbox2 I have granite class as cq-dialog-checkbox-showhide.

 

Here's my script:

(function (document, $) {
"use strict";

// when dialog gets injected
$(document).on("foundation-contentloaded", function (e) {
// if there is already an inital value make sure the according target element becomes visible
var element=$(".cq-dialog-new-checkbox-showhide");
var checkbox1= $(".cq-dialog-new-checkbox-showhide")[0].checked;
var target = $(element).data("cqDialogNewCheckboxShowhideTarget");

var checkbox2= $(".cq-dialog-checkbox-showhide")[0].checked;
checkboxShowHideHandler(element, target, checkbox1, checkbox2);
});

$(document).on("change", ".cq-dialog-new-checkbox-showhide", function (e) {
var checkbox2= $(".cq-dialog-checkbox-showhide")[0].checked;
var checkbox1 = $(".cq-dialog-new-checkbox-showhide")[0].checked;
var element2=$(".cq-dialog-new-checkbox-showhide");
var target2 = $(element2).data("cqDialogNewCheckboxShowhideTarget");

checkboxShowHideHandler($(this), target2, checkbox2, checkbox1);
});
$(document).on("change", ".cq-dialog-checkbox-showhide", function (e) {
var element1=$(".cq-dialog-checkbox-showhide");
var checkbox2= $(".cq-dialog-checkbox-showhide")[0].checked;
var checkbox1 = $(".cq-dialog-new-checkbox-showhide")[0].checked;
var target1 = $(element1).data("cqDialogCheckboxShowhideTarget");
checkboxShowHideHandler($(this), target1, checkbox1, checkbox2);
});

function checkboxShowHideHandler(el, target, checkbox2, checkbox1) {
el.each(function (i, element) {
if($(element).is("coral-checkbox")) {
// handle Coral3 base drop-down
Coral.commons.ready(element, function (component) {
showHide(component, element, target, checkbox2, checkbox1);
component.on("change", function () {
showHide(component, element, target, checkbox2, checkbox1);
});
});
} else {
// handle Coral2 based drop-down
var component = $(element).data("checkbox");
if (component) {
showHide(component, element, target, checkbox2, checkbox1);
}
}
});
}

function showHide(component, element, target, checkbox2, checkbox1) {
// get the selector to find the target elements. its stored as data-.. attribute
var $target = $(target);
$target.addClass("hide");
if (target) {
if (component.checked || checkbox1 || checkbox2) {
$target.removeClass("hide");
}
}
}
})(document, Granite.$);

1 reply

Sady_Rifat
Community Advisor
Sady_RifatCommunity Advisor
Community Advisor
July 17, 2023

Hello @priyak-1 ,

Firstly not sure which checkbox clientlib you are using.

But the idea you are trying to do most probably is not supported by your clientlib. Check your checkbox-show-hide clientlib how it's working.

If it's not implemented by checking multiple classes just change the code.

Hints: all you need to take the classes and insert a loop.

    P
    priyak-1Author
    Level 3
    July 17, 2023

    Hi @sady_rifat,

     

    This is my checkbox-showhide clientlib's js:

    (function(document, $) {
        "use strict";
        // when dialog gets injected
        $(document).on("foundation-contentloaded", function(e) {
            showHide($("[data-cq-dialog-checkbox-showhide]", e.target));
        });
     
        $(document).on("change", "[data-cq-dialog-checkbox-showhide]", function(e) {
        showHide($(this));
        });
     
        function showHide(el){
     
            el.each(function(i, element) {
     
                var target, value;
    var type = $(element).prop("type");
                if(element && element.tagName==="CORAL-SWITCH"){
            value =  $(element).prop('checked');
            }
            target = $(element).data("cq-dialog-showhide-target");
                
                if (target) {
                hideUnselectedElements(target, value);
                showTarget(target, value);
                }
            });
        }
     
        // make sure all unselected target elements are hidden.
        function hideUnselectedElements(target){
            $(target).not(".hide").each(function() {
                $(this).addClass('hide');
            });
        }
        
        // unhide the target element that contains the selected value as data-showhidetargetvalue attribute
        function showTarget(target, value){
            $(target).filter("[data-showhidetargetvalue*='" + value + "'],:has([data-showhidetargetvalue*='" + value + "'])").each(function() {
                $(this).removeClass('hide');
            });
        }
     
    })(document,Granite.$);
     
    These are my 2 checkbox fields both are using same granite class, and in target I'm giving 2 granite classes:
     
     

     

    So here if either of my checkbox1/checkbox2 is true, I'll have to show the target.

     

      Sady_Rifat
      Community Advisor
      Sady_RifatCommunity Advisor
      Community Advisor
      July 17, 2023

      @priyak-1 , can you share your corresponding dialog XML code? Not necessarily the full code. You can only share the checkbox show-hide-related code. I tried to re-generate your problem. But I doubt it works for a single checkbox also.

        Terms & ConditionsAccessibility statement

        Loading footer...