Multi-select: Another others option pop up when the first 'others' option is checked.

Question

We have 'Others' options at the end to let users write something, but what if a respondent has multiple ‘Others’ that want to write? What I'd love to fulfill is if users write something in 'Others' and have that checkbox checked, a new checkbox will pop up and users could write and check.

Answer 1

Start by adding a large number of other specify response options to your select question.  Add as many as you believe a respondent could reasonably want to use.  Then add this to your select question's footer:

<script>
$(document).ready(function(){
    var firstHiddenOther = 999;
    var list = $('input[name="hid_list_[% QuestionName() %]"]').val().split(',').map(Number);
    for (var i = 0; i < list.length; i++) {
        var item = list[i];
        if ($('#[% QuestionName() %]_' + item + '_other').length && !SSI_GetValue('[% QuestionName() %]_' + item)) {
            $('#[% QuestionName() %]_' + item).closest('.response_row').hide();
            firstHiddenOther = item < firstHiddenOther ? item : firstHiddenOther;
        }
    }
    var newResponseRow = $('#[% QuestionName() %]_' + firstHiddenOther).closest('.response_row');
    $(newResponseRow).parent().append($(newResponseRow));
    $(newResponseRow).show();
})

function SSI_CustomGraphicalCheckbox(graphical, input, bln) {
    if ($(input).closest('.response_row').find('.text_input').length) {
        var list = $('input[name="hid_list_[% QuestionName() %]"]').val().split(',').map(Number);
        if (bln) {
            var showNewOther = true;
            var firstHiddenOther = 999;
            for (var i = 0; i < list.length; i++) {
                var item = list[i];
                var ithResponseRow = $('#[% QuestionName() %]_' + item).closest('.response_row');
                var ithOther = $('#[% QuestionName() %]_' + item + '_other').length;
                var ithChecked = SSI_GetValue('[% QuestionName() %]_' + item);
                var ithHidden = $(ithResponseRow).is(':hidden');
                if (ithOther && !ithChecked) {
                    showNewOther = !ithHidden ? false : showNewOther;
                    firstHiddenOther = (item < firstHiddenOther) ? item : firstHiddenOther;
                }
            }
            if (showNewOther) {
                var newResponseRow = $('#[% QuestionName() %]_' + firstHiddenOther).closest('.response_row');
                $(newResponseRow).parent().append($(newResponseRow));
                $(newResponseRow).show();
            }
        }
        else {
            var keepThisResponseRow = true;
            var thisResponseRow = $(input).closest('.response_row');
            for (var i = 0; i < list.length; i++) {
                var item = list[i];
                if ('[% QuestionName() %]_' + item != input.name) {
                    var ithResponseRow = $('#[% QuestionName() %]_' + item).closest('.response_row');
                    var ithOther = $('#[% QuestionName() %]_' + item + '_other').length;
                    var ithChecked = SSI_GetValue('[% QuestionName() %]_' + item);
                    var ithHidden = $(ithResponseRow).is(':hidden');
                    if (ithOther && !ithChecked && !ithHidden) {
                        keepThisResponseRow = false;
                        break;
                    }
                }
            }
            if (keepThisResponseRow) {
                $(thisResponseRow).parent().append($(thisResponseRow));
            }
            else {
                $(thisResponseRow).hide();
            }
        }
    }
}
</script>

Comments

Thank you and it works perfectly! And one more following question, what if the question is grid-format? I still expect another 'other' pops up when you fill something in the previous 'other'.

---

By the way, for the first solution you provided, I found some bugs. When you uncheck the non-'other' item, that item will disappear from the lists! Any methods to fix this?

---

If you copy-and-paste the above code into your question again, that bug should not occur.

The code would need to be reworked for a grid question, as well as a number of follow-up questions would need answers.  Is the grid direction rows or columns?  Are the other specifies rows or columns?  Are v9.1.0 mobile grids being used?

---

Grid direction is rows and 'other' specifies rows which I expect to add one more row if the previous 'other' has been filled. Not sure whether I'm using v9.1.0 mobile grid or not, situation is I'm using  Sawtooth 9.4.0 and I did not use Grid Wizard when creating grid questions.