Как я могу получить значение флажка в jQuery?
Получить значение флажка в jQuery
Ответ 1
Чтобы получить значение атрибута Value, вы можете сделать что-то вроде этого:
$("input[type='checkbox']").val();
Или, если вы установили class
или id
для него, вы можете:
$('#check_id').val();
$('.check_class').val();
Однако это вернет одно и то же значение, независимо от того, отмечено оно или нет, это может сбить с толку, поскольку оно отличается от представленного поведения формы.
Чтобы проверить, проверено это или нет, выполните:
if ($('#check_id').is(":checked"))
{
// it is checked
}
Ответ 2
Эти два способа работают:
-
$('#checkbox').prop('checked')
-
$('#checkbox').is(':checked')
(спасибо @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" />
Ответ 3
Попробуйте это небольшое решение:
$("#some_id").attr("checked") ? 1 : 0;
или
$("#some_id").attr("checked") || 0;
Ответ 4
Единственными правильными способами получения значения флажка являются следующие
if ( elem.checked )
if ( $( elem ).prop( "checked" ) )
if ( $( elem ).is( ":checked" ) )
как описано в официальных документах на веб-сайте jQuery. Остальные методы не имеют ничего общего с свойством этого флажка, они проверяют атрибут, который означает, что они проверяют начальное состояние флажка при его загрузке. Короче говоря:
- Когда у вас есть элемент, и вы знаете, что это флажок, вы можете просто прочитать его свойство, и вам не понадобится jQuery для этого (т.е.
elem.checked
), или вы можете использовать$(elem).prop("checked")
, если вы хотите положиться на jQuery. - Если вам нужно знать (или сравнивать) значение, когда элемент был сначала загружен (т.е. значение по умолчанию), правильный способ сделать это -
$(elem).is(":checked")
.
Ответы вводят в заблуждение, проверьте сами:
Ответ 5
Просто чтобы прояснить ситуацию:
$('#checkbox_ID').is(":checked")
Вернет 'true' или 'false'
Ответ 6
$('#checkbox_id').val();
$('#checkbox_id').is(":checked");
$('#checkbox_id:checked').val();
Ответ 7
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);
});
Ответ 8
Простой, но эффективный и предполагает, что вы знаете, что флажок будет найден:
$("#some_id")[0].checked;
Дает true
/false
Ответ 9
//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
пример
демонстрация
Ответ 10
Несмотря на то, что этот вопрос задает решение jQuery, вот чистый ответ на JavaScript, поскольку никто не упомянул об этом.
Без jQuery:
Просто выберите элемент и обратитесь к checked
property (который возвращает логическое значение).
var checkbox = document.querySelector('input[type="checkbox"]');
alert(checkbox.checked);
<input type="checkbox"/>
Ответ 11
Вот как получить значение всех отмеченных флажков как массив:
var values = (function() {
var a = [];
$(".checkboxes:checked").each(function() {
a.push(this.value);
});
return a;
})()
Ответ 12
Используйте следующий код:
$('input[name^=CheckBoxInput]').val();
Ответ 13
$('.class[value=3]').prop('checked', true);
Ответ 14
<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>
Ответ 15
Просто внимание, на сегодняшний день, 2018, из-за того, что апи меняется с годами. removeAttr лишены, больше не работают!
JQuery Check или unCheck a:
Плохо, не работает.
$('#add_user_certificate_checkbox').removeAttr("checked");
$('#add_user_certificate_checkbox').attr("checked","checked");
Вместо этого вы должны сделать:
$('#add_user_certificate_checkbox').prop('checked', true);
$('#add_user_certificate_checkbox').prop('checked', false);
Ответ 16
Помимо JQuery, вы можете сделать это с помощью JavaScript для вызова события элемента:
<input onchange="handlecheckbox(this)" type="checkbox">
<script>
function handlecheckbox(el) {
alert(el.checked)
}
</script>