Toggle - get true or false result

Question

Follows the code:

Model:

public bool teste{ get; set; }

View:

<div class="checkbox">
     @Html.CheckBoxFor(model => model.teste)
</div>

HTML result:

<div class="checkbox">
    <div class="lcs_wrap"><input checked="checked" data-val="true" id="teste" name="teste" type="checkbox" value="true">
    <div class="lcs_switch lcs_checkbox_switch lcs_on">
        <div class="lcs_cursor"></div>
        <div class="lcs_label lcs_label_on"><span class="glyphicon glyphicon-ok"></span></div>
        <div class="lcs_label lcs_label_off"><span class="glyphicon glyphicon-remove"></span></div>
        </div>
    </div>
    <input name="teste" type="hidden" value="false">
</div>

Script:

I’ve tried several ways:

Attempt 1

var teste= $('#teste').prop('checked');

Attempt 2

var teste= $("#teste").is(":checked");

Attempt 3

$('body').delegate('#teste', function() {
  var teste = ($(this).is(':checked')) ? 'checked' : 'unchecked';
});

On the line : <div class="lcs_switch lcs_checkbox_switch lcs_on"> = true

When false <div class="lcs_switch lcs_checkbox_switch lcs_off"> = false

Some solution ?

Answer 1

1. There are two inputs with the ID teste, which is not advisable to do.
2. As @Miguel said, the first input is like hidden, that is, there is no property checked for this type of input.
3. As I understand it, you are using the Razor of Asp.Net, which may be happening as well, is that your javascript code is running even before the HTML element exists on the page, but to be sure, you have to debug in the browser console and check if the element is there, e.g.: console.log($("#teste"));.
4. Instead of trying to take value for property checked, try to take the value for the property value.

Answer 2

You can do it like this:

$('#teste[type="checkbox"]').change(function() {
  $(this).next('div').toggleClass('lcs_on', this.checked).toggleClass('lcs_off', !this.checked);
});

.lcs_on:after {
   content: 'lcs_on'; 
 }

.lcs_off:after {
   content: 'lcs_off'; 
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
    <input data-val="true"  id="teste" name="teste" type="hidden" value="True">
    <div class="lcs_wrap">
        <input checked="checked" id="teste" name="teste" type="checkbox" value="true">
        <div class="lcs_switch lcs_checkbox_switch lcs_on">
            <div class="lcs_cursor"></div>
            <div class="lcs_label lcs_label_on">
                <span class="glyphicon glyphicon-ok"></span>
            </div>
            <div class="lcs_label lcs_label_off">
                <span class="glyphicon glyphicon-remove"></span>
            </div>
        </div>
    </div>
     <input name="teste" type="hidden" value="false">
</div>

You had another field with the same id before your checkbox, so I put the [type="checkbox"] in the selector to differentiate, basically this observes the modification in the checkbox and makes the management of the classes as you explained in the question, I put a css just to see better!