Coordinates

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.3.0/bootbox.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/query-builder.standalone.js"></script>
<div id="builder-widgets"></div>
<button id="getRules">Get Rules</button>
<button id="setRules">Set Rules</button>
<textarea id="output"></textarea>

CSS

/*!
 * jQuery QueryBuilder 2.3.3
 * Copyright 2014-2016 Damien "Mistic" Sorel (http://www.strangeplanet.fr)
 * Licensed under MIT (http://opensource.org/licenses/MIT)
 */

.rule-filter-container select:first-child {
    margin-right: 10px;
}

#rulebuilder dd {
    margin-left: 35px;
}

#rulebuilder>dl>dd {
    margin-left: 15px;
}

#rulebuilder dl:first-child:not(dl) > dd > dl {
    margin-left: 10px;
}

#rulebuilder dl:first-child {
    border: none;
}

.query-builder .rule-container {
    position: relative;
    margin: 10px 0;
    border-radius: 5px;
    padding: 5px;
    border: 1px solid #AAA;
    background: rgba(200, 200, 200, 0.2);
}

.query-builder .rules-group-container,
.query-builder .rule-placeholder {
    position: relative;
    margin: 10px 0;
    border-radius: 5px;
    padding: 5px;
    border: 1px solid #AAA;
    background: rgba(255, 255, 255, 0.9);
}

.query-builder .rule-container .rule-filter-container,
.query-builder .rule-container .rule-operator-container,
.query-builder .rule-container .rule-value-container,
.query-builder .error-container,
.query-builder .drag-handle {
    display: inline-block;
    margin: 0 10px 0 0;
    vertical-align: middle;
}

.query-builder .rules-group-container {
    padding: 10px;
    padding-bottom: 6px;
    border: 1px solid #AAA;
    background: transparent;
}

.query-builder .rules-group-header {
    margin-bottom: 10px;
}

.query-builder .rules-group-header .group-conditions .btn.readonly:not(.active),
.query-builder .rules-group-header .group-conditions input[name$=_cond] {
    display: none;
}

.query-builder .rules-group-header .group-conditions .btn.readonly {
    border-radius: 3px;
}

.query-builder .rules-list {
    list-style: none;
    padding: 0 0 0 35px;
    margin: 0;
}

.query-builder .rule-value-container label {
    margin-bottom: 0;
    font-weight: normal;
}

.query-builder .rule-value-container label.block {
    display: block;
}

.query-builder .rule-value-container...

JavaScript

// Click "Get Rules" - display filter as JSON in output box
// Click "Set Rules" - set filter with JSON string in output box

var rules_widgets = 
{
    "condition": "OR",
    "rules": [
        {
            "id": "boolTest",
            "field": "boolTest",
            "type": "boolean",
            "input": "radio",
            "operator": "equal",
            "value": "0"
        }
    ]
};

$('#builder-widgets').queryBuilder({
  filters: [
  {
    id: 'boolTest',
    label: 'Bool test',
    type: 'boolean',
    operators: ['equal'],			// one operator works
    input: 'radio',
    values: {'0': 'False', '1': 'True'}
  }],

  rules: rules_widgets
});

$('#setRules').on('click', function() {
	var outputJsonStr = $('#output').val();
  var outputJson = JSON.parse(outputJsonStr);
  $('#builder-widgets').queryBuilder('setRules', outputJson);
});

$('#getRules').on('click', function() {
  var result = $('#builder-widgets').queryBuilder('getRules');
  if (!$.isEmptyObject(result)) {
    $('#output').val(JSON.stringify(result, undefined, 4));
  }
});