Как я могу получить значение флажка в jQuery?
Чтобы получить значение атрибута Value, вы можете сделать что-то вроде этого:
$("input[type='checkbox']").val();
Или, если вы установили для него class
или id
, вы можете:
$('#check_id').val();
$('.check_class').val();
Однако это вернет значение same, проверено или нет, это может сбивать с толку, поскольку оно отличается от поведения представленной формы.
Чтобы проверить, проверено или нет, выполните:
if ($('#check_id').is(":checked"))
{
// it is checked
}
$("input:checkbox")
. Кроме того, кажется, что в селекторе классов есть опечатка ...
Эти два способа работают:
$('#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" />
Попробуйте это небольшое решение:
$("#some_id").attr("checked") ? 1 : 0;
или
$("#some_id").attr("checked") || 0;
Единственными правильными способами получения значения флажка являются следующие
if ( elem.checked )
if ( $( elem ).prop( "checked" ) )
if ( $( elem ).is( ":checked" ) )
как описано в официальных документах на веб-сайте jQuery. Остальные методы не имеют ничего общего с свойством этого флажка, они проверяют атрибут, который означает, что они проверяют начальное состояние флажка при его загрузке. Короче говоря:
elem.checked
), или вы можете использовать $(elem).prop("checked")
, если вы хотите положиться на jQuery.$(elem).is(":checked")
.Ответы вводят в заблуждение, проверьте сами:
.is(":checked")
и .prop(":checked")
работают одинаково для меня с jQuery 1.10.0
Просто чтобы прояснить ситуацию:
$('#checkbox_ID').is(":checked")
Вернет 'true' или 'false'
$('#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);
});
Простой, но эффективный и предполагает, что вы знаете, что флажок будет найден:
$("#some_id")[0].checked;
Дает true
/false
Несмотря на то, что этот вопрос задает решение jQuery, вот чистый ответ на JavaScript, поскольку никто не упомянул об этом.
Просто выберите элемент и обратитесь к checked
property (который возвращает логическое значение).
var checkbox = document.querySelector('input[type="checkbox"]');
alert(checkbox.checked);
<input type="checkbox"/>
Вот быстрый пример прослушивания события change
:
var checkbox = document.querySelector('input[type="checkbox"]');
checkbox.addEventListener('change', function (e) {
alert(this.checked);
});
<input type="checkbox"/>
Чтобы выбрать отмеченные элементы, используйте :checked
псевдокласс (input[type="checkbox"]:checked
).
Вот пример, который выполняет итерацию над отмеченными элементами input
и возвращает сопоставленный массив имен проверенных элементов.
var elements = document.querySelectorAll('input[type="checkbox"]:checked');
var checkedElements = Array.prototype.map.call(elements, function (el, i) {
return el.name;
});
console.log(checkedElements);
var elements = document.querySelectorAll('input[type="checkbox"]:checked');
var checkedElements = Array.prototype.map.call(elements, function (el, i) {
return el.name;
});
console.log(checkedElements);
<div class="parent">
<input type="checkbox" name="name1" />
<input type="checkbox" name="name2" />
<input type="checkbox" name="name3" checked="checked" />
<input type="checkbox" name="name4" checked="checked" />
<input type="checkbox" name="name5" />
</div>
//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
Пример
Демо
$('. class [value = 3]'). prop ('checked', true);
Используйте следующий код:
$('input[name^=CheckBoxInput]').val();
Вот как получить значение всех отмеченных флажков как массив:
var values = (function() {
var a = [];
$(".checkboxes:checked").each(function() {
a.push(this.value);
});
return a;
})()
Просто внимание, на сегодняшний день, 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);
<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>