How to get the bootstrap value toggle true or false?

Asked

Viewed 1,555 times

2

Has 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>
<link href="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>
    <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">
        <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 if it’s true or false, using Js?

bootstrap-3

2 answers

2


Utilize with prop in the loading event of the GIFT and at the event change 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>
<link href="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>

<input type="checkbox" data-toggle="toggle" checked="checked" id="toggle-event" />

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

References:

1

Select the div and the input, as usual, with id or related. And to know if you are 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>
<script src="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>
<link href="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>

Browser other questions tagged bootstrap-3

You are not signed in. Login or sign up in order to post.