#61 - Display Element If Checkbox Is Checked v0.1

Create conditional visibility based on a checkbox field.

Need help with this MemberScript?

All Memberstack customers can ask for assistance in the 2.0 Slack. Please note that these are not official features and support cannot be guaranteed.

View demo


<!-- 💙 MEMBERSCRIPT #61 v0.1 💙 SHOW ELEMENT IF CHECKBOX IS CHECKED -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"> </script>
<script>
$(document).ready(function() {
    // Initially hide all elements with the 'ms-code-checkbox-display' attribute
    $("[ms-code-checkbox-display]").hide();

    // When a checkbox with 'ms-code-checkbox-input' attribute is clicked, perform the following
    $("[ms-code-checkbox-input]").click(function() {
        // Get the value of the 'ms-code-checkbox-input' attribute
        var checkboxVal = $(this).attr('ms-code-checkbox-input');
        
        // Find the corresponding element with the 'ms-code-checkbox-display' attribute and same value
        var displayElement = $("[ms-code-checkbox-display=" + checkboxVal + "]");

        // If this checkbox is checked, show the corresponding element
        if ($(this).is(":checked")) {
            displayElement.show();
        } else {
            // If this checkbox is unchecked, hide the corresponding element
            displayElement.hide();
        }
    });
});
</script>

Description

Attribute

No items found.