Add N/A Option to Multi Image Select Question

The image selection question does not allow you to have an N/A Exclusive option. This tutorial will walk you through adding an exclusive option where no other images can be selected if the N/A option is selected. 

Check it out in a survey here: 

Check it out in an example survey!

OR

Add a survey with this setup to your account.

Features used in this example: 

Setup

After setting up your multi select image question with one image designated to be your "N/A" option click Action, select JavaScript, give it a name then click Save Action and Edit. Copy and paste the code below into the action:

jQuery(function($) {
    $(document).ready(function() {
        $(".sg-imageselect-item").click(function() {

            var find = 'N/A'; ///This must be changed in accordance with the title of the image you want to be exclusive
            var cur_clicked = $(this).find("img").attr("alt");
            var parent = $(this).parents('.sg-question-options');

            if ( cur_clicked.indexOf(find)!=-1 ) { // if they click 'None of these'

                // add class to hook the unique none of these button
                $(this).addClass("sg-none-of-these");

                // then uncheck and remove classes on all
                parent.find(".sg-imageselect-item").not($(".sg-none-of-these")).each(function() {

                    $(this).find("input").attr("checked", false);
                    //$(this).find("input").attr("disabled", "disabled");
                    $(this).removeClass("sg-image-selected");

                });


                $(this).addClass("sg-image-selected");
                $(this).find("input").attr("checked", true);
            }else {
                // Item which isn't 'None of these' was clicked
                // and
                // If 'None of these' is ticked then untick it and uncheck it
                parent.find("input[title='"+find+"']").attr("checked", false);
                parent.find("input[title='"+find+"']").parent().parent().parent().parent().removeClass("sg-image-selected");
                parent.find(".sg-none-of-these input").attr("checked", false);
                parent.find(".sg-none-of-these").removeClass("sg-image-selected");
            }        
        });

    }); // end ready

}); // end JQuery

After pasting the JavaScript, change the text in yellow to match the text of your image file.  This will be set up in the Question Builder. 

Test! Test! Test!

Now it's time to test out your survey. When the N/A option is selected, other options will not be able to be selected in conjunction with N/A.

Scripting and Other Custom Solutions

We’re always happy to help you debug any documented script that is used as is. That said, we do not have the resources to write scripts on demand or to debug a customized script.

If you have customization ideas that you haven't figured out how to tackle, we're happy to be a sounding board for Alchemer features and functionality ideas that might meet your needs. Beyond this, check out our Professional Services; these folks have the scripting chops to help you to achieve what you are looking for!

Basic Standard Market Research HR Professional Full Access Reporting
Free Individual Team & Enterprise
Feature Included In