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

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

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

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

if ($('#isAgeSelected').attr('checked'))
{
    $("#txtAge").show();
}
else
{
    $("#txtAge").hide();
}
<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 selected
</div>

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

23.05.2009 15:16:39
$ ('# isAgeSelected') возвращает коллекцию, замените ее на: $ ('# isAgeSelected') [0] .checked
zamoldar 19.05.2015 16:53:21
почему нет$('#isAgeSelected').checked
Don Cheadle 27.10.2015 14:52:34
Для полного (и правильного) ответа смотрите: stackoverflow.com/questions/426258/…
Paul Kenjora 19.04.2016 14:11:12
Поскольку селекторы jQuery возвращают массив, вы можете использовать$('#isAgeSelected')[0].checked
Felipe Leão 20.06.2016 19:36:34
для меня сработал следующий твик: замените .attr («проверено») на .is («проверено»)
Mark N Hopgood 11.05.2018 09:42:40
30 ОТВЕТОВ

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

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>

3419
9.03.2018 02:06:27
я тоже пробовал вышеупомянутое условие, но оно возвращает только ложь
Prasad 23.05.2009 15:24:20
. $ ( "# txtAge") тумблер (this.checked); Делает точно так же, как $ ("# txtAge"). Toggle (). Итак, если по какой-то причине состояние проверено и следующий div скрыт (вы нажали кнопку назад в браузере) - он не будет работать должным образом.
Maksim Vi. 4.10.2010 20:55:23
@Chiramisu - Если бы вы прочитали ответ полностью, вы бы заметили, что мое редактирование не использует is(':checked')бизнес.
karim79 6.03.2012 10:14:19
установить: $ ("# chkmyElement") [0] .checked = true; получить: if ($ ("# chkmyElement") [0] .checked)
JJ_Coder4Hire 22.04.2014 02:28:35
Это не ответ на вопрос. this.checkedэто не jQuery, как того требует ОП. Кроме того, это работает только тогда, когда пользователь нажимает на флажок, который не является частью вопроса. Вопрос, опять же, How to check whether a checkbox is checked in jQuery?в любой момент времени с или без установки флажка и в jQuery.
Marc Compte 6.07.2017 10:58:14

Я считаю, что вы могли бы сделать это:

if ($('#isAgeSelected :checked').size() > 0)
{
    $("#txtAge").show(); 
} else { 
    $("#txtAge").hide();
}
52
23.05.2009 15:34:24
оповещения ($ ( 'вход [имя = isAgeSelected]') атр ( 'проверено').); Код выше показывает true / false на основе проверки. Любая проблема с предыдущими попытками
Prasad 23.05.2009 15:41:43
Прасад, вы ссылаетесь на свой флажок по имени или идентификатору? Я сейчас запутался ...
karim79 23.05.2009 15:52:26
Вы не можете дать ему удостоверение личности? Все было бы намного проще, в вашем примере у вас есть адрес по его идентификатору
xenon 23.05.2009 16:10:24
Начиная с jQuery 1.8 метод .size () устарел. Вместо этого используйте свойство .length (без no () ;-)! И, может быть, вы должны склеить "#isAgeSelected: проверено".
François Breton 28.02.2018 11:17:13
РЕШЕНИЕ

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

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

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

Кроме того, ответ @ karim79 отлично работает. Я не уверен, что я пропустил в то время, когда я проверял это.

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

100
23.05.2017 12:34:51
Во всех случаях, на всех обычных языках программирования, вы можете опустить== true
RedPixel 14.04.2019 20:07:51
@RedPixel Если вы не имеете дело с обнуляемыми типами. :) (педантичный смайлик)
Kolob Canyon 1.07.2019 16:51:39

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

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

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

169
7.05.2014 12:18:22
Это работает, потому что $ ("# checkkBoxId"). Attr ("флажок") возвращает "проверено" или "" (пустая строка). И пустая строка ложная, непустая строка правдивая, см. О значениях истина / ложь docs.nodejitsu.com/articles/javascript-conventions/…
Adrien Be 12.07.2013 07:09:07
По jquery 2.1.x он возвращает всегда проверено, если он проверен по умолчанию ... Я не знаю, является ли это поведение преднамеренным, но это, безусловно, не работает (я думаю, это ошибка) ... Val () тоже не работает, остается включенным. Prop () работает правильно и dom.checked тоже работает.
inf3rno 23.07.2014 16:19:57
И проблема возникает, когда вы должны поддерживать старые браузеры с .attr()! Если бы они просто оставляли достаточно хорошо в одиночестве ... Нашел здесь другой ответ, в котором сказано, что вы можете просто использовать this.checkedэто решение для кросс-jQuery, поскольку это просто Javascript.
vapcguy 19.06.2015 16:48:48
.attr ('флажок') проверит, установлен ли он по умолчанию, да. Потому что он проверяет атрибут html , а не текущее состояние. Предыдущая версия была ошибкой (хотя я полагаю, что она сильно использовалась).
Jay Irvine 14.10.2019 07:28:24

У меня возникла та же проблема, и ни одно из опубликованных решений, похоже, не работало, а затем я обнаружил, что это потому, что ASP.NET отображает элемент управления CheckBox как SPAN с INPUT внутри, поэтому CheckBox ID на самом деле является идентификатором SPAN, а не INPUT, поэтому вы должны использовать:

$('#isAgeSelected input')

скорее, чем

$('#isAgeSelected')

и тогда все методы, перечисленные выше, должны работать.

12
9.12.2010 14:44:05

Я столкнулся с точно такой же проблемой. У меня есть флажок ASP.NET

<asp:CheckBox ID="chkBox1" CssClass='cssChkBox1' runat="server" />

В коде jQuery я использовал следующий селектор, чтобы проверить, был ли установлен флажок или нет, и, похоже, он работает как шарм.

if ($("'.cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }

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

if ($("'#cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }

Я надеюсь, это поможет вам.

47
25.05.2011 10:59:04

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

/* isAgeSelected being id for checkbox */

$("#isAgeSelected").click(function(){
  $(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
});
42
30.10.2016 17:08:46

Вот пример, который включает инициализацию show / hide для соответствия состоянию флажка при загрузке страницы ; принимая во внимание тот факт, что Firefox запоминает состояние флажков при обновлении страницы, но не запоминает состояние показанных / скрытых элементов.

$(function() {
    // initialise visibility when page is loaded
    $('tr.invoiceItemRow').toggle($('#showInvoiceItems').attr('checked'));
    // attach click handler to checkbox
    $('#showInvoiceItems').click(function(){ $('tr.invoiceItemRow').toggle(this.checked);})
});

(с помощью других ответов на этот вопрос)

12
10.05.2011 21:36:20

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

if($("#isAgeSelected").is(':checked'))
    $("#txtAge").show();  // checked
else
    $("#txtAge").hide();  // unchecked
1833
23.08.2012 03:42:16
Если вам не нужна продолжительность, ослабление и т. Д., Вы можете использовать $("#txtAge").toggle($("#isAgeSelected").is(':checked'))
naor 11.09.2013 07:21:09
+1 есть разные способы получить проверенную недвижимость. Некоторые из них перечислены здесь
user3199690 30.10.2014 07:07:56
На самом деле @NickG JQuery делает есть : видимый селектор
hvdd 17.07.2015 21:37:54
@hvdd я знаю - я сказал "собственность", а не селектор.
NickG 20.07.2015 08:16:57
@ НикГ ... Я не понимаю, что ты имеешь в виду. У jQuery нет .visible«свойства» ( свойство ? Вы имеете в виду метод ?), потому что элемент без HTML имеет видимое свойство. У них есть display свойство стиля, и это немного сложнее, чем вкл / выкл.
xDaizu 28.01.2016 11:43:23

Использование 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
}
560
23.06.2011 17:29:18
Я хотел бы знать, почему это не ответ ... если вы вообще используете jquery, то .propметод - это спроектированный способ проверки реквизита. ... ... Если вы собираетесь использовать .is(":checked")подход, это нормально, но это не спроектированный способ сделать это с помощью jquery. правильно?
dsdsdsdsd 1.12.2013 12:28:58
@dsdsdsdsd предположительно потому, что ему нужен еще один шаг обратной совместимости (сейчас я сталкиваюсь с той же проблемой).
user98085 28.01.2014 11:38:14
.is(":checked")и .prop("checked")оба являются действительными способами получить тот же результат в jQuery, .isбудут работать во всех версиях, .propтребуется 1.6+
gnarf 26.06.2014 20:50:18
Если вы используете .attr('checked')в jQuery 1.11.3, вы получите неопределенный, где, если вы используете .prop('checked'), вы получите true / false. Я не понимаю, почему они изменили его так, чтобы старые браузеры не могли поддерживать более поздние версии jQuery, которые были введены .prop()и, следовательно, необходимы .attr(). Единственным преимуществом является то, что старые браузеры (т.е. IE 8) не могут ничего поддерживать> jQuery 1.9. Надеюсь, они не сделали этого (make .attr('checked')= undefined) в этой версии! К счастью, всегда есть this.checked.
vapcguy 19.06.2015 16:53:26

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

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

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

   if ($(this).is(':checked'))
     $("#txtAge").show();
   else
     $("#txtAge").hide();
});
62
30.10.2016 17:09:33
Начиная с jQuery 1.7, .on()метод является предпочтительным методом для прикрепления обработчиков событий к документу.
naor 11.09.2013 07:02:39

Мой способ сделать это:

if ( $("#checkbox:checked").length ) {       
    alert("checkbox is checked");
} else {
    alert("checkbox is not checked");
}
33
6.04.2015 20:52:33

Я проверил в Firefox 9.0.1, что для определения состояния изменений после флажка работает следующее:

$("#mycheckbox").change(function() {
    var value = $(this).prop("checked") ? 'true' : 'false';                     
    alert(value);
});
16
7.02.2012 18:43:37
$(selector).attr('checked') !== undefined

Это возвращает, trueесли вход проверен, и falseесли это не так.

31
21.03.2013 11:13:00
Я понимаю, почему это может работать в определенных сценариях, хотя имеет ту же проблему, .attr('checked')что и то, что оно не всегда возвращает правильное состояние. Согласно Салман A «s ответ (и , возможно , других»), это более безопасный вариант, чтобы использовать .prop('checked')вместо. Кроме того, также можно объявить undefinedкак var undefined = 'checked';.
WynandB 5.04.2013 00:56:27
.prop('checked')действительно кажется лучшим ответом сейчас. Это не было так надежно в то время, когда это было написано. Я не понимаю и не думаю, что это хорошая идея переопределить неопределенное.
fe_lix_ 25.04.2013 10:02:28
Как примечание, проверка на неопределенность лучше сtypeof (x) !== "undefined"
naor 11.09.2013 07:05:10
В таком случае, я считаю, что это точнее и легче читать! ==. Я бы использовал typeof (x) только при тестировании переменной, которая может быть или не быть определена в прошлом.
fe_lix_ 18.09.2013 08:04:23

Я решил опубликовать ответ о том, как сделать то же самое без 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событию checkboxe функцию, которая проверяет, был ли установлен флажок, и соответствующим образом устанавливает hiddenсвойство текстового поля age. В этом примере используется троичный оператор.

Вот скрипка для вас, чтобы проверить это.

добавление

Если кросс-браузерная совместимость является проблемой, я предлагаю установить для displayсвойства CSS значение none и inline .

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

Медленнее, но кросс-браузер совместим.

53
5.04.2012 15:50:25
Ну, .hiddenне очень кросс-браузер, хотя мне нравится это решение :)
Florian Margaine 20.03.2012 19:59:40
Это действительно лучший способ использования style. Это прискорбно, поскольку .hiddenпроизводительность намного лучше .
Florian Margaine 21.03.2012 09:37:06
Назначение внутри условного оператора? Законно, да. Однако не то, что я бы назвал хорошим стилем.
Jules 5.04.2012 12:12:26
можно упростить до: ageInput.hidden =! this.checked; (Я ненавижу, когда люди используют логические литералы без необходимости ... если вы используете оба слова "истина" и "ложь" в одном и том же простом утверждении, вероятно, нет необходимости использовать и то и другое)
JoelFan 6.03.2015 20:38:14

Начиная с 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")
119
30.10.2016 17:10:20
и $ ("# txtAge") [0] .checked
Yevgeniy Afanasyev 16.05.2018 03:52:29

Главный ответ не сделал это для меня. Это сделал, хотя:

<script type="text/javascript">
    $(document).ready(function(){

        $("#li_13").click(function(){
            if($("#agree").attr('checked')){
                $("#saveForm").fadeIn();
            }
            else
            {
                $("#saveForm").fadeOut();
            }
        });
    });
</script>

В основном, когда щелкает элемент # li_13, он проверяет, проверен ли элемент # accept (который является флажком) с помощью .attr('checked')функции. Если это так, то fadeIn элемента #saveForm, а если нет, то fadeOut элемента saveForm.

24
30.10.2016 17:12:04
if( undefined == $('#isAgeSelected').attr('checked') ) {
    $("#txtAge").hide();
} else {
    $("#txtAge").show();
}
2
18.01.2013 13:39:28
if( undefined == $('#isAgeSelected').attr('checked') ) {
    $("#txtAge").hide();
} else {
    $("#txtAge").show();
}
6
14.08.2015 08:57:47

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

$(this).toggle($("input:checkbox", $(this))[0].checked);

Когда вы выбираете вне контекста, помните, что вам нужно [0], чтобы получить доступ к флажку.

9
30.10.2016 17:13:39

Это был мой обходной путь:

$('#vcGoButton').click(function () {
    var buttonStatus = $('#vcChangeLocation').prop('checked');
    console.log("Status is " + buttonStatus);
    if (buttonStatus) {
        var address = $('#vcNewLocation').val();
        var cabNumber = $('#vcVehicleNumber').val();
        $.get('postCabLocation.php',
              {address: address, cabNumber: cabNumber},
              function(data) {
                  console.log("Changed vehicle " + cabNumber + " location to " + address );
              });
    }
    else {
        console.log("VC go button clicked, but no location action");
    }
});
10
30.10.2016 17:15:24

Включите jQuery из локальной файловой системы. Я использовал CDN Google , и есть также много CDN на выбор.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Код будет выполнен, как только будет установлен флажок внутри mycheckкласса. Если установлен флажок текущего щелчка, он отключит все остальные и включит текущий. Если текущий не отмечен, он снова включит все флажки для перепроверки.

<script type="text/javascript">
    $(document).ready(function() {

        var checkbox_selector = '.mycheck input[type=checkbox]';

        $(checkbox_selector).click(function() {
            if ($($(this)).is(':checked')) {

                // Disable all checkboxes
                $(checkbox_selector).attr('disabled', 'disabled');

                // Enable current one
                $($(this)).removeAttr('disabled');
            }
            else {
                // If unchecked open all checkbox
                $(checkbox_selector).removeAttr('disabled');
            }
        });
    });
</script>

Простая форма для тестирования

<form method="post" action="">
    <div class="mycheck">
        <input type="checkbox" value="1" /> Television
        <input type="checkbox" value="2" /> Computer
        <input type="checkbox" value="3" /> Laptop
        <input type="checkbox" value="4" /> Camera
        <input type="checkbox" value="5" /> Music Systems
    </div>
</form>

Экран вывода:

Введите описание изображения здесь

17
30.10.2016 17:18:06
if($("#checkkBoxId").is(':checked')){
  alert("Checked=true");
}

или

if($("#checkkBoxId").attr('checked') == true){
  alert("checked=true");
}
17
10.06.2013 13:12:59

Это минимальный объем кода, я думаю, мне нужно было сделать что-то подобное эффективно. Я нашел этот метод полезным; он возвращает массив флажков, которые отмечены, и затем вы можете использовать их значение (это решение использует jQuery):

// This is how you get them
var output = "";
var checkedBoxes = $("DivCheckBoxesAreIn").children("input:checked");
if(checkedBoxes.length <= 0) {
    alert('Please select check boxes');
    return false;
};

// And this is how you use them:
checkedBoxes.each(function() {
    output +=  this.value + ", ";
};

Вывод «output» выдаст вам список значений, разделенных запятыми.

13
30.10.2016 17:20:46

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

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

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

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

88
12.09.2015 16:10:02
почему нет $('#isAgeSelected').checked?
Don Cheadle 27.10.2015 14:53:21
чтобы использовать .is вам нужно двоеточие $ ('# isAgeSelected'). is (': checked')
Patrick 18.02.2016 12:44:36

Я использую это:

 <input type="checkbox" id="isAgeSelected" value="1" /> <br/>
 <input type="textbox" id="txtAge" />

 $("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
22
30.10.2016 17:22:27

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

<input type="checkbox" id="abc" value="UDB">UDB
<input type="checkbox" id="abc" value="Prasad">Prasad
$('input#abc').click(function(){
  if($(this).is(':checked'))
  {
    var checkedOne=$(this).val()
    alert(checkedOne);

    // Do some other action
  }
})

Это может помочь, если вы хотите, чтобы требуемое действие выполнялось только тогда, когда вы устанавливаете флажок, а не в тот момент, когда вы снимаете флажок.

61
29.10.2018 10:25:55

checkedАтрибут input type="checkbox"сопоставляется с defaultCheckedсобственностью, не с checkedсобственностью.

Поэтому, когда вы делаете что-то на странице, когда флажок не установлен, используйте prop()вместо этого метод. Он извлекает значение свойства и изменяется по мере изменения состояния флажка.

Использование attr() или getAttribute(в чистом JavaScript) в этих случаях не является правильным способом ведения дел.

Если elemэтот флажок имеет значение, сделайте что-то вроде этого, чтобы получить значение:

elem.checked

или

$(elem).prop('checked')
15
30.10.2016 17:24:23

1) Если ваша HTML-разметка:

<input type="checkbox"  />

attr используется:

$(element).attr("checked"); // Will give you undefined as initial value of checkbox is not set

Если используется проп:

$(element).prop("checked"); // Will give you false whether or not initial value is set

2) Если ваша HTML-разметка:

 <input type="checkbox"  checked="checked" />// May be like this also  checked="true"

attr используется:

$(element).attr("checked") // Will return checked whether it is checked="true"

Подставка используется:

$(element).prop("checked") // Will return true whether checked="checked"
27
30.10.2016 17:25:33
Это НАСТОЯЩАЯ проблема. Мой обходной путь - добавьте событие изменения к входу: <input type = "checkbox" onchange = "ChangeChkBox ()" /> затем используйте это событие для изменения логической переменной JavaScript и используйте переменную JavaScript вместо прямого запроса флажка.
Graham Laight 10.05.2016 11:33:26

Я уверен, что это не какое-то откровение, но я не видел всего этого в одном примере:

Селектор для всех отмеченных флажков (на странице):

$('input[type=checkbox]:checked')
18
30.10.2016 17:26:56