Respostas:
Para obter o valor do atributo Value, você pode fazer algo assim:
$("input[type='checkbox']").val();
Ou, se você definiu um class
ou id
para ele, pode:
$('#check_id').val();
$('.check_class').val();
No entanto, isso retornará o mesmo valor, verificado ou não, isso pode ser confuso, pois é diferente do comportamento do formulário enviado.
Para verificar se está marcado ou não, faça:
if ($('#check_id').is(":checked"))
{
// it is checked
}
$($0).val()
no Chrome e desmarcar a caixa de seleção, a resposta será "ativada", mesmo que não esteja marcada. Mas $($0).is(":checked")
retorna o valor certo.
[type="checkbox"]
tem melhor desempenho em navegadores modernos do que :checkbox
.
$('#check_id').val();
para $('#check_id').is(":checked");
retornar o valor verdadeiro ou falso.
Essas duas maneiras estão funcionando:
$('#checkbox').prop('checked')
$('#checkbox').is(':checked')
(obrigado @mgsloan)$('#test').click(function() {
alert("Checkbox state (method 1) = " + $('#test').prop('checked'));
alert("Checkbox state (method 2) = " + $('#test').is(':checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Check me: <input id="test" type="checkbox" />
Experimente esta pequena solução:
$("#some_id").attr("checked") ? 1 : 0;
ou
$("#some_id").attr("checked") || 0;
As únicas maneiras corretas de recuperar o valor de uma caixa de seleção são as seguintes
if ( elem.checked )
if ( $( elem ).prop( "checked" ) )
if ( $( elem ).is( ":checked" ) )
conforme explicado nas documentações oficiais no site do jQuery. O restante dos métodos não tem nada a ver com a propriedade da caixa de seleção, eles estão verificando o atributo, o que significa que estão testando o estado inicial da caixa de seleção quando ela foi carregada. Então, resumindo:
elem.checked
) ou poderá usá- $(elem).prop("checked")
lo se quiser confiar no jQuery.$(elem).is(":checked")
.As respostas são enganosas, verifique abaixo você mesmo:
.is(":checked")
e .prop(":checked")
estão trabalhando o mesmo para mim w / jQuery 1.10.0
$('#checkbox_id').val();
$('#checkbox_id').is(":checked");
$('#checkbox_id:checked').val();
jQuery(".checkboxClass").click(function(){
var selectedCountry = new Array();
var n = jQuery(".checkboxClass:checked").length;
if (n > 0){
jQuery(".checkboxClass:checked").each(function(){
selectedCountry.push($(this).val());
});
}
alert(selectedCountry);
});
Simples, mas eficaz e pressupõe que você saiba que a caixa de seleção será encontrada:
$("#some_id")[0].checked;
Dá true
/false
//By each()
var testval = [];
$('.hobbies_class:checked').each(function() {
testval.push($(this).val());
});
//by map()
var testval = $('input:checkbox:checked.hobbies_class').map(function(){
return this.value; }).get().join(",");
//HTML Code
<input type="checkbox" value="cricket" name="hobbies[]" class="hobbies_class">Cricket
<input type="checkbox" value="hockey" name="hobbies[]" class="hobbies_class">Hockey
Demonstração de exemplo
Apesar de esta pergunta estar pedindo uma solução jQuery, aqui está uma resposta JavaScript pura, já que ninguém a mencionou.
Basta selecionar o elemento e acessar a checked
propriedade (que retorna um booleano).
var checkbox = document.querySelector('input[type="checkbox"]');
alert(checkbox.checked);
<input type="checkbox"/>
Aqui está um exemplo rápido ao ouvir o change
evento:
var checkbox = document.querySelector('input[type="checkbox"]');
checkbox.addEventListener('change', function (e) {
alert(this.checked);
});
<input type="checkbox"/>
Para selecionar elementos marcados, use a :checked
pseudo classe ( input[type="checkbox"]:checked
).
Aqui está um exemplo que itera sobre os input
elementos verificados e retorna uma matriz mapeada dos nomes dos elementos verificados.
var elements = document.querySelectorAll('input[type="checkbox"]:checked');
var checkedElements = Array.prototype.map.call(elements, function (el, i) {
return el.name;
});
console.log(checkedElements);
checked
propriedade é facilmente acessível no elemento DOM nativo. Algumas pessoas que pesquisam perguntas / respostas como essas geralmente desconhecem o fato de que o jQuery às vezes não é necessário. Em outras palavras, as pessoas de mente estreita não são o alvo demográfico para esta resposta.
Aqui está como obter o valor de todas as caixas de seleção marcadas como uma matriz:
var values = (function() {
var a = [];
$(".checkboxes:checked").each(function() {
a.push(this.value);
});
return a;
})()
para obter o valor do checkboxex marcado em jquery
:
var checks = $("input[type='checkbox']:checked"); // returns object of checkeds.
for(var i=0; i<checks.length; i++){
console.log($(checks[i]).val()); // or do what you want
});
em pure js
:
var checks = document.querySelectorAll("input[type='checkbox']:checked");
for(var i=0; i<checks.length; i++){
console.log(checks[i].value); // or do what you want
});
Use o seguinte código:
$('input[name^=CheckBoxInput]').val();
$('.class[value=3]').prop('checked', true);
A melhor maneira é $('input[name="line"]:checked').val()
E também você pode obter o texto selecionado $('input[name="line"]:checked').text()
Inclua atributo e nome de valor nas entradas do botão de opção. Certifique-se de que todas as entradas tenham o mesmo atributo de nome.
<div class="col-8 m-radio-inline">
<label class="m-radio m-radio-filter">
<input type="radio" name="line" value="1" checked> Value Text 1
</label>
<label class="m-radio m-radio-filter">
<input type="radio" name="line" value="2"> Value Text 2
</label>
<label class="m-radio m-radio-filter">
<input type="radio" name="line" value="3"> Value Text 3
</label>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.laravel').click(function(){
var val = $(this).is(":checked");
$('#category').submit();
});
});
<form action="{{route('directory')}}" method="post" id="category">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input name="category" value="{{$name->id}}" class="laravel" type="checkbox">{{$name->name}}
</form>
Apenas atenção, a partir de hoje, 2018, devido à mudança de APIs ao longo dos anos. removeAttr está obsoleto, NÃO está mais funcionando!
Jquery Marque ou desmarque uma caixa de seleção:
Ruim, não funciona mais.
$('#add_user_certificate_checkbox').removeAttr("checked");
$('#add_user_certificate_checkbox').attr("checked","checked");
Em vez disso, você deve fazer:
$('#add_user_certificate_checkbox').prop('checked', true);
$('#add_user_certificate_checkbox').prop('checked', false);
$("input:checkbox")
. Além disso, parece haver um erro de digitação no seletor de classe ...