Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

hide and show text box base on checkbox selection

hi guys,
i have a grid type question with multiple response, each option have other specified. i want to show text box on checkbox selection and hide on uncheck, i have below code but this code is very lengthy can you please help.

<script>
$(document).ready(function(){
    hideAllOtherQ();
})
function SSI_CustomGraphicalCheckbox(graphicalCheckboxObj, inputObj) {
    if (SSI_GetValue('[% QuestionName() %]_r1_c1') == 1) {
                $('#[% QuestionName() %]_r1_other').show();
    }
    if (SSI_GetValue('[% QuestionName() %]_r1_c1') != 1) {
                $('#[% QuestionName() %]_r1_other').hide();
    }
    if (SSI_GetValue('[% QuestionName() %]_r2_c1') == 1) {
                $('#[% QuestionName() %]_r2_other').show();
    }
    if (SSI_GetValue('[% QuestionName() %]_r2_c1') != 1) {
                $('#[% QuestionName() %]_r2_other').hide();
    }
    if (SSI_GetValue('[% QuestionName() %]_r3_c1') == 1) {
                $('#[% QuestionName() %]_r3_other').show();
    }
    if (SSI_GetValue('[% QuestionName() %]_r3_c1') != 1) {
                $('#[% QuestionName() %]_r3_other').hide();
    }
    if (SSI_GetValue('[% QuestionName() %]_r4_c1') == 1) {
                $('#[% QuestionName() %]_r4_other').show();
    }
    if (SSI_GetValue('[% QuestionName() %]_r4_c1') != 1) {
                $('#[% QuestionName() %]_r4_other').hide();
    }
    if (SSI_GetValue('[% QuestionName() %]_r5_c1') == 1) {
                $('#[% QuestionName() %]_r5_other').show();
    }
    if (SSI_GetValue('[% QuestionName() %]_r5_c1') != 1) {
                $('#[% QuestionName() %]_r5_other').hide();
    }
    if (SSI_GetValue('[% QuestionName() %]_r6_c1') == 1) {
                $('#[% QuestionName() %]_r6_other').show();
    }
    if (SSI_GetValue('[% QuestionName() %]_r6_c1') != 1) {
                $('#[% QuestionName() %]_r6_other').hide();
    }}
 function hideAllOtherQ() {
    $('#[% QuestionName() %]_r1_other').hide();
    $('#[% QuestionName() %]_r2_other').hide();
    $('#[% QuestionName() %]_r3_other').hide();
    $('#[% QuestionName() %]_r4_other').hide();
    $('#[% QuestionName() %]_r5_other').hide();
    $('#[% QuestionName() %]_r6_other').hide();
}
</script>
asked Jan 17 by Nomi

1 Answer

0 votes
There are a number of tools at our disposal that can be used to shrink the amount of code necessary.  Let's go through them one at a time.

First off is looping.  Your code has a number of situations where you do something for r1, then the same thing for r2, and so on until r6.  A loop can handle that all for you.

<script>
$(document).ready(function(){
    hideAllOtherQ();
})
function SSI_CustomGraphicalCheckbox(graphicalCheckboxObj, inputObj) {
    for (var i = 1; i <= 6; i++) {
        if (SSI_GetValue('[% QuestionName() %]_r' + i + '_c1') == 1) {
            $('#[% QuestionName() %]_r' + i + '_other').show();
        }
        if (SSI_GetValue('[% QuestionName() %]_r' + i + '_c1') != 1) {
            $('#[% QuestionName() %]_r' + i + '_other').hide();
        }
    }
 function hideAllOtherQ() {
     for (var i = 1; i <= 6; i++) {
        $('#[% QuestionName() %]_r' + i + '_other').hide();
     }
}
</script>


Second, you can combine "show" and "hide" with a function called "toggle."  You can pass toggle an equality test and it will show the element if the test returns true and hide the element if the test returns false.

<script>
$(document).ready(function(){
    hideAllOtherQ();
})
function SSI_CustomGraphicalCheckbox(graphicalCheckboxObj, inputObj) {
    for (var i = 1; i <= 6; i++) {
        $('#[% QuestionName() %]_r' + i + '_other').toggle(SSI_GetValue('[% QuestionName() %]_r' + i + '_c1') == 1);
    }
 function hideAllOtherQ() {
     for (var i = 1; i <= 6; i++) {
        $('#[% QuestionName() %]_r' + i + '_other').hide();
     }
}
</script>


A final, optional way to shorten the code is to remove the "== 1."  In JavaScript, 1 is considered "truthy" and 0 is considered "falsey."  So because SSI_GetValue returns 1 or 0, you can pass those values directly into the toggle.

<script>
$(document).ready(function(){
    hideAllOtherQ();
})
function SSI_CustomGraphicalCheckbox(graphicalCheckboxObj, inputObj) {
    for (var i = 1; i <= 6; i++) {
        $('#[% QuestionName() %]_r' + i + '_other').toggle(SSI_GetValue('[% QuestionName() %]_r' + i + '_c1'));
    }
 function hideAllOtherQ() {
     for (var i = 1; i <= 6; i++) {
        $('#[% QuestionName() %]_r' + i + '_other').hide();
     }
}
</script>
answered Jan 17 by Zachary Platinum Sawtooth Software, Inc. (94,775 points)
...