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

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

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

Вернет «истина» или «ложь»

$('#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

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

Пример
Демо

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

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

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

получить значение проверенного checkboxex в jquery:

var checks = $("input[type='checkbox']:checked"); // returns object of checkeds.

for(var i=0; i<checks.length; i++){
    console.log($(checks[i]).val()); // or do what you want
});

в pure js:

var checks = document.querySelectorAll("input[type='checkbox']:checked");

for(var i=0; i<checks.length; i++){
    console.log(checks[i].value); // or do what you want
});

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

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

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

Лучший способ это $('input[name="line"]:checked').val()

А также вы можете получить выделенный текст $('input[name="line"]:checked').text()

Добавьте значение атрибута и имя для ваших входов переключателя. Убедитесь, что все входы имеют одинаковый атрибут name.

<div class="col-8 m-radio-inline">
    <label class="m-radio m-radio-filter">
        <input type="radio" name="line" value="1" checked> Value Text 1
    </label>
    <label class="m-radio m-radio-filter">
        <input type="radio" name="line" value="2"> Value Text 2
    </label>
    <label class="m-radio m-radio-filter">
        <input type="radio" name="line" value="3"> Value Text 3
    </label>
</div>

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

Просто внимание, по состоянию на сегодня, 2018, из-за изменения API с годами. removeAttr запрещены, больше не работают!

Jquery Установите или снимите флажок:

Плохо, больше не работает.

   $('#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);