How to get the bootstrap toggle true or false?

Navigation
2

You have a code: 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkhref="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script><form><divclass="checkbox">
        <label>
            <input type="checkbox" checked="checked" />
            Checkbox One
        </label>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"/>
            Checkbox Two
        </label>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox" data-toggle="toggle" checked="checked" />
            Toggle One
        </label>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox" data-toggle="toggle"/>
            Toggle Two
        </label>
    </div>
    <div>
        <input type="reset" class="btn btn-default"/>
    </div>
</form>

How do I get it if it is true or false , using Js ?

    
asked by anonymous 29.12.2016 / 15:48

2 answers

2

Use jquery with prop in the DOM loading event and change event of the element. 

$(function() {
    $('#toggle-event').change(function() {
      $('#console-event').html('Toggle: ' + $(this).prop('checked'))
    });
    $('#console-event').html('Toggle: ' + $('#toggle-event').prop('checked'));
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkhref="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script><inputtype="checkbox" data-toggle="toggle" checked="checked" id="toggle-event" />

<div id="console-event"></div>

References:

29.12.2016 / 15:58
1

Select div and input , as usual, with id or related. And to know if it is selected, just use .checked : 

$('#toggle1 input:checkbox').change(function(){
	console.log("toogle one:", this.checked); // ou $(this).prop('checked')
})
$('#toggle2 input:checkbox').change(function(){
	console.log("toogle two:", this.checked);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script><linkhref="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<form>
    <div class="checkbox">
        <label>
            <input type="checkbox" checked="checked" />
            Checkbox One
        </label>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"/>
            Checkbox Two
        </label>
    </div>
    <div class="checkbox" id="toggle1">
        <label>
            <input type="checkbox" data-toggle="toggle" checked="checked" />
            Toggle One
        </label>
    </div>
    <div class="checkbox" id="toggle2">
        <label>
            <input type="checkbox" data-toggle="toggle"/>
            Toggle Two
        </label>
    </div>
    <div>
        <input type="reset" class="btn btn-default"/>
    </div>
</form>
    
29.12.2016 / 15:57
Creating byte collection in old browsers via JavaScript? Treat all hexadecimal colors in a .css file using php and regex