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

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

14 ответов


чтобы получить значение атрибута 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" />

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

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

или

$("#some_id").attr("checked") || 0;

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

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/


просто чтобы прояснить вещи:

$('#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, так как никто его не упоминал.

без jQuery:

просто выберите элемент и удалить checked свойства (которая возвращает логическое значение).

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).

вот пример, который повторяет checked input elements и возвращает сопоставленный массив имен проверяемого элемента.

Пример

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

пример
демо


вот как получить значение все галочкой как массив:

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

<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>

Использовать Этот $('input[name^=CheckBoxInput]').val ();


$('.класс[значение=3]').prop ('проверено', true);