Получить значение флажка в jQuery

404

Как я могу получить значение флажка в jQuery?

Теги:
forms
checkbox

15 ответов

820
Лучший ответ

Чтобы получить значение атрибута Value, вы можете сделать что-то вроде этого:

$("input[type='checkbox']").val();

Или, если вы установили для него class или id, вы можете:

$('#check_id').val();
$('.check_class').val();

Однако это вернет значение same, проверено или нет, это может сбивать с толку, поскольку оно отличается от поведения представленной формы.

Чтобы проверить, проверено или нет, выполните:

if ($('#check_id').is(":checked"))
{
  // it is checked
}
  • 3
    Что делает первый пример, если на странице есть несколько флажков? Кстати, это может быть записано более коротким способом $("input:checkbox") . Кроме того, кажется, что в селекторе классов есть опечатка ...
  • 1
    @Jawa: первый был просто примером, чтобы показать синтаксис и спасибо за эту опечатку.
Показать ещё 4 комментария
163

Эти два способа работают:

  • $('#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" />
  • 8
    .is ('флажок') не работает, потому что он должен быть .is (': флажок')
  • 0
    Спасибо за ваш ответ. Это современный ответ с функцией jQuery prop ()
50

Попробуйте это небольшое решение:

$("#some_id").attr("checked") ? 1 : 0;

или

$("#some_id").attr("checked") || 0;
  • 12
    пришлось изменить «attr» на «prop», тогда это сработало для меня
  • 0
    Это только шаблон))) 'attr' => 'prop'! Я думаю, это звучит хорошо
22

Единственными правильными способами получения значения флажка являются следующие

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

как описано в официальных документах на веб-сайте jQuery. Остальные методы не имеют ничего общего с свойством этого флажка, они проверяют атрибут, который означает, что они проверяют начальное состояние флажка при его загрузке. Короче говоря:

  • Когда у вас есть элемент, и вы знаете, что это флажок, вы можете просто прочитать его свойство, и вам не понадобится jQuery для этого (т.е. elem.checked), или вы можете использовать $(elem).prop("checked"), если вы хотите положиться на jQuery.
  • Если вам нужно знать (или сравнивать) значение, когда элемент был сначала загружен (т.е. значение по умолчанию), правильный способ сделать это - $(elem).is(":checked").

Ответы вводят в заблуждение, проверьте сами:

http://api.jquery.com/prop/

  • 0
    .is(":checked") и .prop(":checked") работают одинаково для меня с jQuery 1.10.0
13

Просто чтобы прояснить ситуацию:

$('#checkbox_ID').is(":checked")

Вернет 'true' или 'false'

11
$('#checkbox_id').val();
$('#checkbox_id').is(":checked");
$('#checkbox_id:checked').val();
  • 0
    не работает. вам может понадобиться столбец перед проверкой ": проверено"
  • 3
    .val () не работает. Возвращает «вкл» независимо от отмеченного.
9
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);
    });
7

Простой, но эффективный и предполагает, что вы знаете, что флажок будет найден:

$("#some_id")[0].checked;

Дает true/false

6

Несмотря на то, что этот вопрос задает решение jQuery, вот чистый ответ на JavaScript, поскольку никто не упомянул об этом.

Без jQuery:

Просто выберите элемент и обратитесь к 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>
  • 1
    Это не отвечает на вопрос.
  • 0
    @MichaelCole - я просто перечитал вопрос (3 года спустя), и похоже, что он действительно отвечает на вопрос, поэтому не стесняйтесь уточнять.
Показать ещё 2 комментария
5
//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

Пример
 Демо

1

$('. class [value = 3]'). prop ('checked', true);

1

Используйте следующий код:

$('input[name^=CheckBoxInput]').val();
1

Вот как получить значение всех отмеченных флажков как массив:

var values = (function() {
                var a = [];
                $(".checkboxes:checked").each(function() {
                    a.push(this.value);
                });
                return a;
            })()
0

Просто внимание, на сегодняшний день, 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);
0
<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>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню