<!-- Define the body as a bootstrap container -->
<body>
<div class="container">
Checkbox1: <input type="checkbox" name="checkbox1" id="checkbox1" checked><br/>
Checkbox2: <input type="checkbox" name="checkbox2" id="checkbox2" checked><br/>
Checkbox3: <input type="checkbox" name="checkbox3" id="checkbox3" checked><br/>
Checkbox4: <input type="checkbox" name="checkbox4" id="checkbox4" checked><br/>
Checkbox5: <input type="checkbox" name="checkbox5" id="checkbox5" checked><br/>
</div>
<!-- Script Area -->
<script>
$( document ).ready(function() {
$(":checkbox").bootstrapSwitch();
b4j_connect("/ws");
});
</script>
<script>
$(":checkbox").on('switchChange.bootstrapSwitch', function(event, state) {
console.log(this); // DOM element
console.log(event); // jQuery event
console.log(state); // true | false
b4j_raiseEvent("checkbox1_event", {"id": this.id, "state": state});
});
</script>
</body>