How to retrieve Bootstrap Switch value when user toggle between on and off?

Question

I currently have a bootstrap switch that allow users to toggle between "yes" or "no". I also have a "send" button. If the user toggle to the "yes" option, I want to collect a "true" value. If user toggle to the "no" option, I want to collect a "false" value and then send it to my Post web api method. However, I was only able to receive the "true" value even when the user toggle to "no"

$("#trueInput").bootstrapSwitch();
$('#saveButton').on('click', function () {
var collectedInput = $("#trueInput").val();
});

<input type="checkbox" id="trueInput" name="trueInput value="true" checked/>

Answer 1

This will solve your problem.

            $('[type="radio"]').click(function () {
                var isChecked = $(this).val();
                alert(isChecked);
            });
 

        .btn-default.btn-on.active {
            background-color: #5BB75B;
            color: white;
        }

        .btn-default.btn-off.active {
            background-color: #DA4F49;
            color: white;
        }

    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    
<div class="container" style="margin-top:20px;">
        <div class="row">
            <div class="btn-group" id="status" data-toggle="buttons">
                <label class="btn btn-default btn-on btn-xs active">
                    <input type="radio" value="true" name="on" checked="checked">ON</label>
                <label class="btn btn-default btn-off btn-xs ">
                    <input type="radio" value="false" name="off">OFF</label>
            </div>

        </div>