Cart Licenses Contact Support Online Creator Log in/Register
Try
Free
v 1.9.43

Checkboxes


                        
        
            Survey.StylesManager.applyTheme("bootstrap");
            Survey.defaultBootstrapCss.navigationButton = "btn btn-green";
        



                
                    var json = {
  "elements": [
    {
      "type": "checkbox",
      "name": "car",
      "title": "What car are you driving?",
      "isRequired": true,
      "hasNone": true,
      "colCount": 4,
      "choices": [ "Ford", "Vauxhall", "Volkswagen", "Nissan", "Audi", "Mercedes-Benz", "BMW", "Peugeot", "Toyota", "Citroen" ]
    }
  ]
};

                    window.survey = new Survey.Model(json);
                
        
            survey.onComplete.add(function(sender) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
            });
        
        
            $("#surveyElement").Survey({
            model: survey 
            });
        

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Checkboxes, jQuery Survey Library Example</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/jquery"></script>
    <script src="/DevBuilds/survey-jquery/survey.jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./index.css">

</head>
<body style="margin: 0">
    
            <div id="surveyElement" style="display:inline-block;width:100%;">
            </div>
    <div id="surveyResult"></div>

<script type="text/javascript" src="./index.js"></script>

</body>
</html>
There are several ways to set the 'choices' property.
// The classic way to set the property. The result values are numbers: 1 and 2
choices: [{ value: 1, text: "Value 1" }, { value: 2, text: "Value 2" }]
// The values are: 1 and 'Value 2' and texts are '1' and 'Value 2'
choices: [{ value: 1 }, { value: "Value 2" }]
// The values and texts are same
choices: ["Value 1", "Value 2"]
// The values are '1' and '2' and texts are 'Value 1' and 'Value 2'
choices: ["1|Value 1", "2|Value 2"]
Settings

Column count: (default is 1)

var q = survey.getQuestionByName('car');
q.colCount = yourValue;

var q = survey.getQuestionByName('car');
q.hasNone = yourvalue;

var q = survey.getQuestionByName('car');
q.hasSelectAll = yourvalue;

Maximum selected choices: (default is 0, not applied)

var q = survey.getQuestionByName('car');
q.maxSelectedChoices = yourvalue;

Choices order: (default is 'none')

var q = survey.getQuestionByName('car');
q.choicesOrder = yourvalue;

var q = survey.getQuestionByName('car');
q.hasOther = yourvalue;

Others text (It shows when Show others set to true)

var q = survey.getQuestionByName('car');
q.otherText = yourvalue;

Tell Us What You Think

Help us serve you better by taking this brief survey.
We are interested to learn more about your
experience of using our libraries.

We'd really appreciate your feedback.

Start the Survey

Approximate time to complete: 2 min.