71
rated 0 times
[
73]
[
2]
/ answers: 1 / hits: 63293
/ 8 Years ago, fri, july 8, 2016, 12:00:00
I am trying to intercept and handle changes in a bootstrap checkbox and I have added an 'onchange' event. Unfortunately, I was not successful. Currently, I have a button which can change the state of the checkbox and this is working.
Any hint would be much appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<meta name=viewport content=width=device-width, initial-scale=1>
<title>Bootstrap Toggle</title>
<link href=./css/github.min.css rel=stylesheet>
<link href=./css/bootstrap.min.css rel=stylesheet>
<link href=./font-awesome-4.6.3/css/font-awesome.min.css rel=stylesheet>
<link href=./css/bootstrap-toggle.css rel=stylesheet>
<link href=./css/stylesheet.css rel=stylesheet>
<script src=./js/jquery-2.1.3.min.js></script>
<script src=js/bootstrap-toggle.js></script>
</head>
<body>
<div id=events class=container>
<h3>API vs Input</h3>
<p>This also means that using the API or Input to trigger events will work both ways.</p>
<div class=example>
<input id=chk1 type=checkbox data-toggle=toggle onchange=fonctionTest()>
<input id=chk2 type=checkbox data-toggle=toggle>
<input id=chk3 type=checkbox data-toggle=toggle>
<input id=chk4 type=checkbox data-toggle=toggle>
<button class=btn btn-success onclick=toggleOnOff('#chk1','on')>On by API</button>
<button class=btn btn-danger onclick=toggleOnOff('#chk1','off')>Off by API</button>
<div id=console-event></div>
<script>
$(function() {
$('input:checkbox').change(function() {
$('#console-event').html('Toggle: ' + $(this).prop('checked'))
})
})
</script>
<script>
function fonctionTest(){
console.log(This is a test);
}
function toggleOnOff(selector,state){
console.log(element : + selector);
console.log($(selector).prop('checked'));
$(selector).bootstrapToggle(state);
}
function toggleOn() {
$('#chk1').bootstrapToggle('on');
isOnOrOff();
}
function toggleOff() {
$('#chk1').bootstrapToggle('off');
isOnOrOff();
}
function isOnOrOff(){
var c=document.getElementById('chk1');
console.log(c.checked);
}
</script>
</div>
</body>
</html>
More From » jquery
