jquery - para - verificar se o checkbox está marcado javascript
Como verificar se uma caixa de seleção está marcada no jQuery? (20)
Eu preciso verificar a propriedade checked
de uma caixa de seleção e executar uma ação com base na propriedade verificada usando jQuery.
Por exemplo, se a caixa de seleção de idade estiver marcada, será necessário mostrar uma caixa de texto para inserir a idade. Caso contrário, oculte a caixa de texto.
Mas o código a seguir retorna false
por padrão:
if ($('#isAgeSelected').attr('checked'))
{
$("#txtAge").show();
}
else
{
$("#txtAge").hide();
}
Como faço para consultar com êxito a propriedade checked
?
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.
Este exemplo é para o botão.
Tente o seguinte:
<input type="button" class="check" id="checkall" value="Check All" /> <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:
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.