Function does not recognize checkbox.checked

Question

I have the following function:

function alteraSaldo(item){
saldo = parseInt($('#saldo').val());
campo = $('#'+item);

if (campo.checked == true){
    alert('sim');
    saldo = saldo - parseInt(campo.data("valor"));
}else{
    alert('nao');
    saldo = saldo + parseInt(campo.data("valor"));
}

$('#saldo').val(saldo);
}

I call her at the checkbox onclick event:

<input type="checkbox" data-valor="28.00" id="mensalidade9" onclick="alteraSaldo('mensalidade9');" />

The function recognizes the checkbox as it shows the correct value, but always shows that it is NOT "checked".

What can it be?

Answer 1

The estate .checked does not work with jQuery object. You should use, in this case, the .is(":checked") jQuery:

function alteraSaldo(item){
   saldo = parseInt($('#saldo').val());
   campo = $('#'+item);

   if (campo.is(":checked")){
       alert('sim');
       saldo = saldo - parseInt(campo.data("valor"));
   }else{
       alert('nao');
       saldo = saldo + parseInt(campo.data("valor"));
   }

   $('#saldo').val(saldo);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" data-valor="28.00" id="mensalidade9" onclick="alteraSaldo('mensalidade9');" />

Or you could convert the jQuery object to HTML object with campo[0] and check the property .checked:

function alteraSaldo(item){
   saldo = parseInt($('#saldo').val());
   campo = $('#'+item);

   if (campo[0].checked){
       alert('sim');
       saldo = saldo - parseInt(campo.data("valor"));
   }else{
       alert('nao');
       saldo = saldo + parseInt(campo.data("valor"));
   }

   $('#saldo').val(saldo);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" data-valor="28.00" id="mensalidade9" onclick="alteraSaldo('mensalidade9');" />

Answer 2

I have two ideas. A very similar answer above. Test the two that your understanding on the subject will improve.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" data-valor="21.00" id="mensalidade6" class="mensalidade"  />
<input type="checkbox" data-valor="22.00" id="mensalidade7" class="mensalidade"  />
<input type="checkbox" data-valor="28.00" id="mensalidade8" class="mensalidade"  />

<input type="checkbox" data-valor="28.00" id="mensalidade9" onclick="alteraSaldo($(this));" />

<script>
$('.mensalidade').on('click',function(){
    saldo = parseInt($('#saldo').val());
    if ($(this).is(':checked')){
        saldo = saldo + parseInt($(this).attr('data-valor'));   
    }else{
        saldo = saldo - parseInt($(this).attr('data-valor'));
    }
    alert(saldo);
    $('#saldo').val(saldo);
})

function alteraSaldo(item){
    saldo = parseInt($('#saldo').val());
    campo = item;//para seguir seu raciocinio mantive isso
    if (item.is(':checked')){
        saldo = saldo - parseInt(item.attr('data-valor'));
    }else{
        saldo = saldo + parseInt(item.attr('data-valor'));
    }
    alert(saldo);
    $('#saldo').val(saldo);
}