Питання Як перевірити, чи позначено прапорець у jQuery?


Мені потрібно перевірити checked властивість прапорці та виконати дію на основі перевіреного властивості за допомогою jQuery.

Наприклад, якщо встановлено прапорець віку, то я повинен показати текстове поле, щоб ввійти в вік, ще приховати текстове поле.

Але наступний код повертається false за замовчуванням:

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

Як мені успішно задати запит на checked власність


3921


походження


Перевірте інші способи зробити це, використовуючи jQuery тут stackoverflow.com/a/22019103/1868660 - Subodh Ghulaxe
$('#isAgeSelected').change(function(){ alert($('#chkSelect').attr('checked')); }); - Khaled.K
$ ('# isAgeSelected') повертає колекцію, замінюючи її: $ ('# isAgeSelected') [0]. checked - zamoldar
чому ні $('#isAgeSelected').checked - mmcrae
Оскільки jQuery селектори повертають масив, ви можете використовувати $('#isAgeSelected')[0].checked - Felipe Leão


Відповіді:


Як мені успішно надіслати запит на перевірену властивість?

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


3102



Я теж пробував вищезазначену умову, але він повертається тільки фальшивим - Prasad
$ ("# txtAge"); переключитися (це checked); Точно так само, як $ ("# txtAge"). Перемикач (). Отже, якщо з якоїсь причини стан буде перевірено, а наступний розділ буде прихованим (ви натиснули кнопку "Назад" у своєму веб-переглядачі) - це не буде працювати, як очікувалося. - Maksim Vi.
@Chiramisu - Якщо б ви все-таки прочитали відповідь, ви помітили б, що моє редагування не використовує is(':checked') бізнес - karim79
щоб встановити: $ ("# chkmyElement") [0]. checked = true; отримати: if ($ ("# chkmyElement") [0]. checked) - JJ_Coder4Hire
Це не відповідь на питання. this.checked це не jQuery, як вимагає OP. Також він працює тільки тоді, коли користувач натискає цей прапорець, що не є частиною питання. Питання є, знову ж таки How to check whether a checkbox is checked in jQuery? в будь-який момент часу, без або без натискання на прапорець і в jQuery. - Marc Compte


Використовуйте jQuery є () функція:

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

1550



Якщо вам не потрібна тривалість, полегшення тощо, ви можете використовувати $("#txtAge").toggle($("#isAgeSelected").is(':checked')) - naor
+1 існують різні способи отримання перевіреного ресурсу. Деякі з них перераховані тут - user3199690
@NickG Фактично jQuery робить є : видимий селектор - hvdd
@hvdd Я знаю - я сказав "властивість", а не селектор. - NickG
@ NickG ... Я не розумію, що ви маєте на увазі. jQuery не має .visible "власність" (власність? ти маєш на увазі метод?), оскільки елемент HTML не має видимий власність У них є display  стиль власності і це трохи складніше, ніж увімкнути / вимкнути. - xDaizu


Використання 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
}

473



Я хотів би дізнатись, чому це не відповідь ... якщо ви використовуєте jquery взагалі, то .prop метод є розроблений спосіб перевірити реквізит. .. Якщо ти збираєшся це зробити .is(":checked") підхід, це добре, але це не спроектований спосіб зробити це за допомогою jquery. правильно? - dsdsdsdsd
@dsdsdsdsd, мабуть, тому що йому потрібен ще один етап зворотної сумісності (я зараз стикаюсь з тим же питанням). - user98085
.is(":checked") і .prop("checked") є правильними способами одержати однаковий результат у jQuery, .is буде працювати у всіх версіях, .prop потрібно 1.6+ - gnarf
Якщо ви використовуєте .attr('checked') в jQuery 1.11.3 ви отримаєте невизначеність, де, якщо ви використовуєте .prop('checked'), ви отримаєте правдивість / помилковість. Я не розумію, чому вони змінили його таким чином, коли старі веб-переглядачі не можуть підтримувати пізніші версії jQuery, які введені .prop() і тому потрібно .attr(). Єдиною ефектом збереження є те, що старші веб-переглядачі (тобто IE 8) не можуть нічого підтримувати> jQuery 1.9. Сподіваємось, вони цього не зробили (роблять .attr('checked') = undefined) в цій версії! На щастя, завжди є this.checked. - vapcguy


jQuery 1.6+

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

jQuery 1.5 і нижче

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

Будь-яка версія jQuery

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

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


177



Технічно this.checked використовує прямий Javascript. Але я люблю цю версію, що відповідає jQuery-версії! - vapcguy


Я використовую це, і це працює абсолютно нормально:

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

Примітка. Якщо позначено прапорець, він поверне істину в інший спосіб, не визначено, тому краще перевірте значення "TRUE".


148



Це працює, оскільки $ ("# checkkBoxId"). Attr ("checked") повертає "checked" або "" (порожня рядок). А порожня рядок - фальшива, непуста рядок є істиною, бачимо про істинні / фальшиві цінності docs.nodejitsu.com/articles/javascript-conventions/... - Adrien Be
За допомогою jquery 2.1.x він повертається, завжди перевіряється, якщо він встановлений за замовчуванням ... Я не знаю, чи така поведінка навмисна, але це, безумовно, не працює (я думаю, це помилка) ... val () також не працює, він залишається "на". Пропор () працює належним чином, а також робота з dom.control. - inf3rno
І проблема виникає, коли вам потрібно підтримувати старі веб-переглядачі .attr()! Якщо тільки вони просто залишили достатньо один одного .... Знайшла ще одну відповідь тут сказав, що ви можете просто використовувати this.checked для крос-jQuery рішення, оскільки це просто в основному Javascript. - vapcguy


Використання:

<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


115





Оскільки 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



чомусь prop ("checked") працював для мене, але не є (': checked') - BraveNewMath
і $ ("# txtAge") [0]. перевірено - Yevgeniy Afanasyev


Це працювало для мене:

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

Де isAgeSelected це ідентифікатор контролю.

Крім того, @ karim79's відповісти добре працює. Я не знаю, що я пропустив під час тестування.

Зауважте, що це відповідь використовує Microsoft Ajax, а не jQuery


82





Якщо ви користуєтесь оновленою версією jquery, вам слід зайти .prop Метод вирішення проблеми:

$('#isAgeSelected').prop('checked') повернеться true якщо перевірено і false якщо не позначено Я це підтвердив, і я постала перед цим раніше. $('#isAgeSelected').attr('checked') і $('#isAgeSelected').is('checked') повертається undefined що не є гідною відповіддю на ситуацію. Так робіть так, як наведено нижче.

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

Сподіваюсь це допомагає:) - Спасибі.


79



чому ні $('#isAgeSelected').checked ? - mmcrae
щоб використовувати. Вам потрібна двокрапка $ ('# isAgeSelected'). є (': checked') - Patrick


Використовуючи Click Обробник подій для властивості checkbox є ненадійним, як checked майно може змінитися під час виконання самого обробника події!

В ідеалі, ви хочете, щоб ваш код в a change обробник подій, наприклад, він знімається щоразу, коли змінюється значення прапорця (незалежно від як це робиться так).

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

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

54



Що стосується jQuery 1.7, то .on() Метод є найкращим способом прикріплення обробників подій до документа. - naor


Я вирішив опублікувати відповідь про те, як зробити те саме саме без jQuery. Просто тому, що я бунтівний.

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

Спочатку ви отримуєте обидва елементи за своїм ідентифікатором. Тоді ви призначите прапорець onchange event - функція, яка перевіряє, чи встановлено прапорець і встановлено прапорець hidden властивість текстового поля віку відповідно. У цьому прикладі використовується тернарний оператор.

Ось а скрипка для того, щоб випробувати його.

Доповнення

Якщо сумісність між браузерами є проблемою, то я пропоную встановити CSS display власність на ніхто і в лінію.

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

Повільніше, але крос-браузер сумісний.


49



Добре, .hidden не дуже крос-браузер, хоча мені подобається це рішення :) - Florian Margaine
Це дійсно найкращий спосіб використання style. Це, на жаль, те, що .hidden продуктивність є шлях краще. - Florian Margaine
Призначення всередині умовного оператора? Юридичний, так. Не те, що я б назвав гарним стилем, однак. - Jules
може спростити: ageInput.hidden =! цей контрольований; (Я ненавиджу, коли люди без необхідності використовують булеві літерали ... якщо ви використовуєте як "істинне", так і "помилкове" в тій же простій заяві, то, можливо, це не обов'язково) - JoelFan