Как проверить, установлен ли флажок в jQuery?

Question

Мне нужно проверить свойство checked флажка и выполнить действие на основе проверенного свойства с использованием jQuery.

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

Но следующий код возвращает false по умолчанию:

if ($('#isAgeSelected').attr('checked'))
{
    $("#txtAge").show();
}
else
{
    $("#txtAge").hide();
}

Как успешно запросить свойство checked?

Answer 1

Как успешно запросить проверенное свойство?

Свойство checked элемента DOM флажка даст вам состояние checked элемента.

Учитывая ваш существующий код, вы можете сделать это:

if(document.getElementById('isAgeSelected').checked) {
    $("#txtAge").show();
} else {
    $("#txtAge").hide();
}

Однако, есть гораздо более красивый способ сделать это, используя toggle:

$('#isAgeSelected').click(function() {
    $("#txtAge").toggle(this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>

Answer 2

Используйте функцию jQuery is () :

if($("#isAgeSelected").is(':checked'))
    $("#txtAge").show();  // checked
else
    $("#txtAge").hide();  // unchecked

Answer 3

Использование jQuery> 1.6

<input type="checkbox" value="1" name="checkMeOut" id="checkMeOut" checked="checked" />

// traditional attr
$('#checkMeOut').attr('checked'); // "checked"
// new property method
$('#checkMeOut').prop('checked'); // true

Используя новый метод свойства:

if($('#checkMeOut').prop('checked')) {
    // something when checked
} else {
    // something else when not
}

Answer 4

jQuery 1.6 +

$('#isAgeSelected').prop('checked')

JQuery 1,5 и ниже

$('#isAgeSelected').attr('checked')

Любая версия jQuery

// Assuming an event handler on a checkbox
if (this.checked)

Весь кредит идет на Сиань .

Answer 5

Я использую это, и это работает абсолютно нормально:

$("#checkkBoxId").attr("checked") ? alert("Checked") : alert("Unchecked");

Примечание. Если флажок установлен, он вернет значение true, в противном случае значение не определено, поэтому лучше проверить значение «ИСТИНА».

Answer 6

Использование:

<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned

$("#planned_checked").change(function() {
    if($(this).prop('checked')) {
        alert("Checked Box Selected");
    } else {
        alert("Checked Box deselect");
    }
});

    $("#planned_checked").change(function() {
        if($(this).prop('checked')) {
            alert("Checked Box Selected");
        } else {
            alert("Checked Box deselect");
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned

Answer 7

Начиная с jQuery 1.6, поведение jQuery.attr() изменилось, и пользователям рекомендуется не использовать его для получения проверенного состояния элемента. Вместо этого вы должны использовать jQuery.prop():

$("#txtAge").toggle(
    $("#isAgeSelected").prop("checked") // For checked attribute it returns true/false;
                                        // Return value changes with checkbox state
);

Две другие возможности:

$("#txtAge").get(0).checked
$("#txtAge").is(":checked")

Answer 8

Это сработало для меня:

$get("isAgeSelected ").checked == true

Где isAgeSelected - идентификатор элемента управления.

Также, @ karim79's answer отлично работает. Я не уверен, что пропустил во время тестирования.

Обратите внимание, что в этом ответе используется Microsoft Ajax, а не jQuery

Answer 9

Если вы используете обновленную версию jquery, вы должны использовать метод .prop для решения вашей проблемы:

$('#isAgeSelected').prop('checked') вернет true, если отмечено, и false, если не отмечено. Я подтвердил это, и я столкнулся с этой проблемой ранее. $('#isAgeSelected').attr('checked') и $('#isAgeSelected').is('checked') возвращают undefined, что не является достойным ответом для ситуации. Сделайте так, как указано ниже.

if($('#isAgeSelected').prop('checked')) {
    $("#txtAge").show();
} else {
    $("#txtAge").hide();
}

Надеюсь, это поможет:) - Спасибо.

Answer 10

Использование обработчика событий Click для свойства checkbox ненадежно, поскольку свойство checked может измениться во время выполнения самого обработчика событий!

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

$('#isAgeSelected').bind('change', function () {

   if ($(this).is(':checked'))
     $("#txtAge").show();
   else
     $("#txtAge").hide();
});