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

Question

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

Answer 1

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

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

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

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

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

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

if ($('#check_id').is(":checked"))
{
  // it is checked
}

Answer 2

Эти 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" />

Answer 3

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

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

или

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

Answer 4

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

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/

Answer 5

Просто чтобы уточнить вещи:

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

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

Answer 6

$('#checkbox_id').val();
$('#checkbox_id').is(":checked");
$('#checkbox_id:checked').val();

Answer 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);
    });

Answer 8

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

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

Дает true / false

Answer 9

Несмотря на то, что этот вопрос требует решения 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).

Вот пример, который перебирает проверенные элементы 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>

Answer 10

//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 003 * Демо