Toggle - get result true or false

Question

Toggle - get result true or false

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

Follow 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 have 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';
});

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

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

Any solution?

javascript html5 asp.net-mvc-5

asked by anonymous 05.01.2017 / 07:40

2 answers

1

There are two inputs with ID teste , which is not advisable to do.

According to @Miguel, the first input is hidden , that is, there is no checked property for this type of input.

As I realized you are using Asp.Net Razor, which may be happening too, is that your javascript code is running even before the HTML element exists on the page, but to be sure, you have to debug the Console of the browser and check if the element is there, eg console.log($("#teste")); .

Instead of trying to get the value for the checked property, try to get the value for the value property.

05.01.2017 / 11:19

Query not working, problem comparing years Is it possible to retrieve the selected values from a multiselect list box (not active X)?

score 1 · Accepted Answer

You can do 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><divclass="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 manages the classes as you explained in question, I put a css just to see better!