jquery - para - verificar se o checkbox está marcado javascript

Como faço para consultar com êxito a propriedade verificada?

A propriedade checked de um elemento DOM da caixa de seleção fornecerá o estado checked do elemento.

Dado o seu código existente, você poderia fazer isso:

if(document.getElementById('isAgeSelected').checked) {
    $("#txtAge").show();
} else {
    $("#txtAge").hide();
}

No entanto, há uma maneira muito mais bonita de fazer isso usando toggle :

$('#isAgeSelected').click(function() {
    $("#txtAge").toggle(this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>

A resposta principal não fez isso por mim. Isso fez embora:

<script type="text/javascript">
    $(document).ready(function(){

        $("#li_13").click(function(){
            if($("#agree").attr('checked')){
                $("#saveForm").fadeIn();
            }
            else
            {
                $("#saveForm").fadeOut();
            }
        });
    });
</script>

Basicamente, quando o elemento # li_13 é clicado, ele verifica se o elemento # agree (que é a caixa de seleção) é verificado usando a função .attr('checked') . Se for, então, fadeIn o elemento #saveForm e, se não, fadeOut, o elemento saveForm.

Desde o jQuery 1.6, o comportamento de jQuery.attr() foi alterado e os usuários são encorajados a não usá-lo para recuperar o estado verificado de um elemento. Em vez disso, você deve usar jQuery.prop() :

$("#txtAge").toggle(
    $("#isAgeSelected").prop("checked") // For checked attribute it returns true/false;
                                        // Return value changes with checkbox state
);

Duas outras possibilidades são:

$("#txtAge").get(0).checked
$("#txtAge").is(":checked")

Embora você tenha proposto uma solução JavaScript para o seu problema (exibindo uma textbox quando uma checkbox está checked ), esse problema poderia ser resolvido apenas por CSS . Com essa abordagem, seu formulário funciona para usuários que desativaram o JavaScript.

Supondo que você tenha o seguinte HTML:

<label for="show_textbox">Show Textbox</label>
<input id="show_textbox" type="checkbox" />
<input type="text" />

Você pode usar o seguinte CSS para obter a funcionalidade desejada:

 #show_textbox:not(:checked) + input[type=text] {display:none;}

Para outros cenários, você pode pensar em seletores CSS apropriados.

Aqui está um violino para demonstrar essa abordagem .

Este exemplo é para o botão.

Tente o seguinte:

<input type="button" class="check" id="checkall" value="Check All" />  &nbsp; <input type="button" id="remove" value="Delete" /> <br/>

<input type="checkbox" class="cb-element"  value="1" /> Checkbox  1 <br/>
<input type="checkbox" class="cb-element"  value="2" /> Checkbox  2 <br/>
<input type="checkbox" class="cb-element"  value="3" /> Checkbox  3 <br/>


$('#remove').attr('disabled', 'disabled'); 

$(document).ready(function() {  

    $('.cb-element').click(function() {

        if($(this).prop('checked'))
        {
            $('#remove').attr('disabled', false);
        }
        else
        {
            $('#remove').attr('disabled', true);
        }
    });   

    $('.check:button').click(function()
{
    var checked = !$(this).data('checked');
    $('input:checkbox').prop('checked', checked);
    $(this).data('checked', checked);

    if(checked == true)
    {
        $(this).val('Uncheck All');
         $('#remove').attr('disabled', false);
    }

    else if(checked == false)
    {
        $(this).val('Check All');
        $('#remove').attr('disabled', true);
    }
});
});

Eu acho que vai ser o simples

$('#isAgeSelected').change(function() {
    if($(this).is(":checked")) {
        $('#txtAge').show();
    }
else{
        $('#txtAge').hide();
    }                                          
});

Eu corri para o mesmo problema. Eu tenho uma caixa de seleção do asp.net

<asp:CheckBox ID="chkBox1" CssClass='cssChkBox1' runat="server" />

No código jQuery, usei o seletor a seguir para verificar se a caixa de seleção estava marcada ou não, e parece funcionar como um encanto.

if ($("'.cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }

Tenho certeza que você também pode usar o ID em vez do CssClass,

if ($("'#cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }

Espero que isso ajude você.

Eu decidi postar uma resposta sobre como fazer exatamente a mesma coisa sem o jQuery. Só porque sou um rebelde.

var ageCheckbox = document.getElementById('isAgeSelected');
var ageInput = document.getElementById('txtAge');

// Just because of IE <333
ageCheckbox.onchange = function() {
    // Check if the checkbox is checked, and show/hide the text field.
    ageInput.hidden = this.checked ? false : true;
};

Primeiro você pega os dois elementos pelo ID deles. Em seguida, você atribui ao evento onchange da caixa de seleção uma função que verifica se a caixa de seleção foi marcada e define a propriedade hidden do campo de texto de idade apropriadamente. Nesse exemplo, usando o operador ternário.

Aqui está um fiddle para você testá-lo.

Termo aditivo

Se a compatibilidade entre navegadores for um problema, proponho definir a propriedade de display do CSS como none e inline .

elem.style.display = this.checked ? 'inline' : 'none';

Mais lento, mas compatível com vários navegadores.

Eu estou usando isso:

 <input type="checkbox" id="isAgeSelected" value="1" /> <br/>
 <input type="textbox" id="txtAge" />

 $("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();

Existem várias maneiras de verificar se uma caixa de seleção está marcada ou não:

Maneira de verificar usando jQuery

if (elem.checked)
if ($(elem).prop("checked"))
if ($(elem).is(":checked"))
if ($(elem).attr('checked'))

Verifique o exemplo ou também o documento:

• jQuery.attr()

• jQuery.prop()

Isso funcionou para mim:

$get("isAgeSelected ").checked == true

Onde isAgeSelected é o id do controle.

Além disso, a answer do @ karim79 funciona bem. Não tenho certeza do que senti falta no momento em que testei.

Note que esta é a resposta usa Microsoft Ajax, não jQuery

Minha maneira de fazer isso é:

if ( $("#checkbox:checked").length ) {       
    alert("checkbox is checked");
} else {
    alert("checkbox is not checked");
}

Se você estiver usando uma versão atualizada do jquery, deverá .prop método .prop para resolver o problema:

$('#isAgeSelected').prop('checked') retornará true se marcado e false se desmarcado. Eu confirmei e me deparei com essa questão anteriormente. $('#isAgeSelected').attr('checked') e $('#isAgeSelected').is('checked') está retornando undefined que não é uma resposta $('#isAgeSelected').is('checked') para a situação. Então faça como indicado abaixo.

if($('#isAgeSelected').prop('checked')) {
    $("#txtAge").show();
} else {
    $("#txtAge").hide();
}

Espero que ajude:) - Obrigado.

Usa isto:

if ($('input[name="salary_in.Basic"]:checked').length > 0)

O comprimento é maior que zero se a caixa de seleção estiver marcada.

Usar:

<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned

$("#planned_checked").change(function() {
    if($(this).prop('checked')) {
        alert("Checked Box Selected");
    } else {
        alert("Checked Box deselect");
    }
});

    $("#planned_checked").change(function() {
        if($(this).prop('checked')) {
            alert("Checked Box Selected");
        } else {
            alert("Checked Box deselect");
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned

Use a função is() do jQuery:

if($("#isAgeSelected").is(':checked'))
    $("#txtAge").show();  // checked
else
    $("#txtAge").hide();  // unchecked

Você pode usar:

  if(document.getElementById('isAgeSelected').checked)
    $("#txtAge").show();  
  else
    $("#txtAge").hide();

if($("#isAgeSelected").is(':checked'))
  $("#txtAge").show();  
else
  $("#txtAge").hide();

Ambos devem funcionar.

1) Se a sua marcação HTML é:

<input type="checkbox"  />

attr usado:

$(element).attr("checked"); // Will give you undefined as initial value of checkbox is not set

Se prop é usado:

$(element).prop("checked"); // Will give you false whether or not initial value is set

2) Se a sua marcação HTML é:

 <input type="checkbox"  checked="checked" />// May be like this also  checked="true"

attr usado:

$(element).attr("checked") // Will return checked whether it is checked="true"

Prop usado:

$(element).prop("checked") // Will return true whether checked="checked"

$(document).ready(function() {    
    $('#agecheckbox').click(function() {
        if($(this).is(":checked"))
        {
            $('#agetextbox').show();
        } else {
            $('#agetextbox').hide();
        }
    });
});

$(selector).attr('checked') !== undefined

Isso retorna true se a entrada estiver marcada e false se não estiver.