iCheck Radiogroup Custom Widget
Open in new window

Survey.Survey.cssType = "bootstrap";
Survey.defaultBootstrapCss.navigationButton = "btn btn-green";

Survey.JsonObject.metaData.addProperty("radiogroup", {name: "renderAs", default: "standard", choices: ["standard", "icheck"]});

window.survey = new Survey.Model({ questions: [
 { type: "radiogroup", name: "position", renderAs: "icheck", title: "Choose job position...", isRequired: true, colCount: 0,
     choices: ["1|Designer", "2|Front-end Developer", "3|Back-end Developer", "4|Database Administrator", "5|System Engineer"] }
]});
survey.onComplete.add(function(result) {
	document.querySelector('#surveyResult').innerHTML = "result: " + JSON.stringify(result.data);
});
survey.data = {position:"2"};


var widget = {
    name: "icheck",
    isFit : function(question) { return question["renderAs"] === 'icheck'; },
    isDefaultRender: true,
    afterRender: function(question, el) {
        var $el = $(el);
        var select = function() {
          $el.find("input[value=" + question.value + "]").iCheck('check');
        }
        $el.find('input').iCheck({
          checkboxClass: 'iradio_square-blue',
          radioClass: 'iradio_square-blue'
        });
        $el.find('input').on('ifChecked', function(event){
          question.value = event.target.value;
        });
        question.valueChangedCallback = select;
        select();
    },
    willUnmount: function(question, el) {
        var $el = $(el);
        $el.find('input').iCheck('destroy');
    }
}
Survey.CustomWidgetCollection.Instance.addCustomWidget(widget);

$("#surveyElement").Survey({
    model: survey
});



<!DOCTYPE html>
<html>

<head>
    <title>Welcome to JQuery</title>
    <script src="https://unpkg.com/jquery"></script>
    
    <script src="https://surveyjs.azureedge.net/0.12.22/survey.jquery.js"></script>
    
    
    <script src="https://unpkg.com/icheck@1.0.2"></script>
    <link rel="stylesheet" href="https://unpkg.com/icheck@1.0.2/skins/square/blue.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div id="surveyElement"></div>
    <div id="surveyResult"></div>
    <script src="./index.js"></script>
</body>

</html>

.btn-green {
  background-color: #1ab394;
  color: #fff;
  border-radius: 3px;
}

.btn-green:hover, .btn-green:focus {
    background-color: #18a689;
    color: #fff;
}

.panel-footer {
    text-align: right;
    background-color: #fff;
}