Function does not recognize checkbox.checked

1

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 it in the onclick event of the checkbox:

<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?

    
asked by anonymous 04.08.2018 / 17:08

2 answers

1

The .checked property does not work with jQuery object. You should use, in this case, .is(":checked") of 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><inputtype="checkbox" data-valor="28.00" id="mensalidade9" onclick="alteraSaldo('mensalidade9');" />

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

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><inputtype="checkbox" data-valor="28.00" id="mensalidade9" onclick="alteraSaldo('mensalidade9');" />
    
04.08.2018 / 17:14
-1

I have two ideas. One very similar to the answer above. Test both your understanding on the subject will improve.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="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);
}
    
04.08.2018 / 18:01