Отримайте значення прапорця в jQuery


Відповіді:


1060

Щоб отримати значення атрибута Value, ви можете зробити щось подібне:

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

Або якщо ви встановили classабо idдля нього, ви можете:

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

Однак це поверне те саме значення, перевірено чи ні, це може бути заплутаним, оскільки воно відрізняється від поданої форми поведінки.

Щоб перевірити, перевірено чи ні, виконайте:

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

3
Що робить перший приклад, якщо на сторінці є декілька прапорців? Btw, це можна записати коротшим способом $("input:checkbox"). Крім того, здається, помилка друку у селекторі класу ...
Jawa

1
@Jawa: Перший був лише прикладом для показу синтаксису та подяки за цю друкарню.
Сарфраз

136
Якщо я спробую $($0).val()в Chrome і зніміть прапорець, відповідь "увімкнено", навіть якщо це не поставлено. Але $($0).is(":checked")повертає потрібне значення.
Адріан

2
@Jawa Per api.jquery.com/checkbox-selector [type="checkbox"] має кращі показники роботи в сучасних браузерах, ніж :checkbox.
TrueWill

3
Замініть, $('#check_id').val();щоб $('#check_id').is(":checked");повернути значення true або false.
Матей Міранда

227

Ці два способи працюють:

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


9
.is ('перевірено') не спрацювало, тому що має бути .is (': перевірено')
mgsloan

Спасибі за вашу відповідь. Це найсучасніша відповідь з функцією jQuery prop ()
Thomas.Benz

58

Спробуйте це невелике рішення:

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

або

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

Або !! ($ ("# some_id"). Attr ("перевірено"))
COOLGAMETUBE

34

Єдиний правильний спосіб отримання значення прапорця полягає в наступному

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/


.is(":checked")і .prop(":checked")працюють однаково для мене w / jQuery 1.10.0
Josh

23

Просто для уточнення речей:

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

Повернеться "правда" або "помилка"



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

10

Простий, але ефективний і передбачає, що ви знаєте, що прапорець знайдеться:

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

Дає true/false


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

Приклад
демонстрації


5

Незважаючи на те, що це запитання вимагає рішення 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);


1
Це не відповідає на запитання.
Майкл Коул

@MichaelCole - Я просто перечитував це питання (3 роки потому), і, схоже, це справді відповідає на питання, тому сміливо допрацьовуйте.
Джош Крозьє

1
"Як я можу отримати значення прапорця в jQuery?" -> "Незважаючи на те, що це питання вимагає рішення jQuery ... бла-бла-бла". Це відповідь у мильниці, як інші фактичні відповіді, і саме тому я спростував її.
Майкл Коул

1
@MichaelCole - Досить справедливо, відгуки завжди цінуються. Первісний намір цієї відповіді полягав у тому, щоб вказати, що jQuery можна уникнути у таких тривіальних випадках, коли checkedвластивість легко доступна на вбудованому елементі DOM. Деякі з людей, які шукають такі запитання / відповіді, як правило, не знають про те, що jQuery часом не потрібен. Іншими словами, вузькодумці не є цільовим демографічним показником для цієї відповіді.
Джош Крозьє

2

Ось як отримати значення всіх відзначених прапорців як масиву:

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

2

щоб отримати значення відміченого 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
});


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

1
Питання полягає в тому, як отримати значення, а не як перевірити щось із певним значенням за замовчуванням.
Квентін

0

Найкращий спосіб $('input[name="line"]:checked').val()

А також ви можете отримати вибраний текст $('input[name="line"]:checked').text()

Додайте атрибут значення та ім'я до входів радіо кнопок. Переконайтеся, що всі входи мають однаковий атрибут імені.

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

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

-1

Лише увага, станом на сьогодні, 2018 рік, через падіння, що змінюється роками. deleteAttr вилучені, НЕ працюють більше!

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);
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.