Error capturing checked attribute

Question

JQUERY

$('#caption-item-1').click(function(){
    if($('#boleto-input').checked == true){
        $('doacao-proximo-1').css({'display':'inline-block'});
    }else{
        $('doacao-proximo-1').css({'display':'none'});
    }
})

HTML

<label for="boleto-input">
    <input type="checkbox" name="" id="boleto-input">
    <span class="check-for-bank"></span>
    <img src="img/barcode.jpg">
</label>
...
<p id="doacao-proximo-1" style="display:none;">Próximo</p>

• I can’t get that when the input checked, the button appears.
• The button is like p because when placed as button, the page keeps recharging, even with a preventDefault()

Thank you if you can help me solve, or find a way to solve the problem.

Answer 1

I think you forgot to "#" on $('#doacao-proximo-1'). But try it like this:

$('#caption-item-1').click(function(){
    if($('#boleto-input').is(':checked')) { // <-- altera aqui
        $('#doacao-proximo-1').css({'display':'inline-block'});
    }else{
        $('#doacao-proximo-1').css({'display':'none'});
    }
});

Answer 2

Well, it has already been answered, but I leave here a different way:

$('#caption-item-1').click(function(){
    $('#doacao-proximo-1').css({'display': $('#boleto-input').prop('checked') ? 'inline-block' : 'none'});
});