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


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

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

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

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

Как успешно выполнить запрос checkedимущество?


3863


источник


Ответы:


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

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>


3075



Использовать jQuery является() функция:

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

1525



Использование 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
}

461



jQuery 1.6+

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

jQuery 1.5 и ниже

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

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

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

Все кредиты Xian ,


170



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

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

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


147



Поскольку 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")

105



Use:

<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


102



This worked for me:

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

Where isAgeSelected is the id of the control.

Also, @karim79's answer works fine. I am not sure what I missed at the time I tested it.

Note, this is answer uses Microsoft Ajax, not jQuery


83



If you are using an updated version of jquery, you must go for .prop method to resolve your issue:

$('#isAgeSelected').prop('checked') will return true if checked and false if unchecked. I confirmed it and I came across this issue earlier. $('#isAgeSelected').attr('checked') and $('#isAgeSelected').is('checked') is returning undefined which is not a worthy answer for the situation. So do as given below.

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

Hope it helps :)- Thanks.


79



Using the Click event handler for the checkbox property is unreliable, as the checked property can change during the execution of the event handler itself!

Ideally, you'd want to put your code into a change event handler such as it is fired every time the value of the check box is changed (independent of how it's done so).

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

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

53



I decided to post an answer on how to do that exact same thing without jQuery. Just because I'm a rebel.

var ageCheckbox = document.getElementById('isAgeSelected');
var ageInput = document.getElementById('txtAge');

// Just because of IE <333
ageCheckbox.onchange = function() {
    // Check if the checkbox is checked, and show/hide the text field.
    ageInput.hidden = this.checked ? false : true;
};

First you get both elements by their ID. Then you assign the checkboxe's onchange event a function that checks whether the checkbox got checked and sets the hidden property of the age text field appropriately. In that example using the ternary operator.

Here is a fiddle for you to test it.

Addendum

If cross-browser compatibility is an issue then I propose to set the CSS display property to none and inline.

elem.style.display = this.checked ? 'inline' : 'none';

Slower but cross-browser compatible.


49