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

вопрос создан в Wed, Jun 26, 2019 12:00 AM

Мне нужно проверить свойство 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?

    
4249
  1. Проверьте некоторые другие способы сделать это с помощью jQuery здесь stackoverflow.com/a /22019103/1868660
    2014-02-25 15: 45: 46Z
  2. $('#isAgeSelected').change(function(){ alert($('#chkSelect').attr('checked')); });
    2014-05-14 05: 43: 47Z
  3. $('# isAgeSelected') возвращает коллекцию, замените ее на: $('# isAgeSelected') [0] .checked
    2015-05-19 16: 53: 21Z
  4. почему бы не $('#isAgeSelected').checked
    2015-10-27 14: 52: 34Z
  5. Поскольку селекторы jQuery возвращают массив, вы можете использовать $('#isAgeSelected')[0].checked
    2016-06-20 19: 36: 34Z
30 ответов                              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>
    
3278
2018-03-09 02: 06: 27Z
  1. Я также пробовал вышеуказанное условие, но оно возвращает только ложь
    2009-05-23 15: 24: 20Z
  2. $("# txtAge"). toggle (this.checked); Делает точно так же, как $("# txtAge"). Toggle (). Таким образом, если по какой-то причине состояние проверено, а следующий div скрыт (вы нажали кнопку назад в браузере) - он не будет работать должным образом.
    2010-10-04 20: 55: 23Z
  3. @ Chiramisu. Если бы вы прочитали ответ до конца, вы заметили бы, что в моем редактировании не используется бизнес is(':checked').
    2012-03-06 10: 14: 19Z
  4. для установки: $("# chkmyElement") [0] .checked = true; получить: if ($("# chkmyElement") [0] .checked)
    2014-04-22 02: 28: 35Z
  5. Это не ответ на вопрос. this.checked не является jQuery, как запросил OP. Кроме того, это работает только тогда, когда пользователь нажимает на флажок, который не является частью вопроса. Вопрос, опять же, How to check whether a checkbox is checked in jQuery? в любой момент времени с установкой или снятием флажка и в jQuery.
    2017-07-06 10: 58: 14Z

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

if($("#isAgeSelected").is(':checked'))
    $("#txtAge").show();  // checked
else
    $("#txtAge").hide();  // unchecked
    
1704
2012-08-23 03: 42: 16Z
  1. Если вам не нужна длительность, замедление и т. д., вы можете использовать $("#txtAge").toggle($("#isAgeSelected").is(':checked'))
    2013-09-11 07: 21: 09Z
  2. + 1 есть разные способы получить проверенное свойство. Некоторые из них перечислены здесь
    2014-10-30 07: 07: 56Z
  3. @ NickG На самом деле у jQuery есть : видимый селектор
    2015-07-17 21: 37: 54Z
  4. @ hvdd Я знаю - я сказал "свойство", а не селектор.
    2015-07-20 08: 16: 57Z
  5. @ NickG ... Я не понимаю, что вы имеете в виду. В jQuery отсутствует .visible «свойство» ( свойство ? вы имеете в виду method ?), поскольку элемент HTML не имеет свойства visible . Они имеют свойство display style , и это немного сложнее, чем вкл /выкл.
    2016-01-28 11: 43: 23Z

Использование 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
}
    
518
2011-06-23 17: 29: 18Z
  1. Я хотел бы знать, почему это не ответ ... если вы вообще используете jquery, то метод .prop - это разработанный Способ проверить реквизит. .. ... Если вы собираетесь использовать подход .is(":checked"), это нормально, но это не спроектированный способ сделать это с помощью jquery. не так ли?
    2013-12-01 12: 28: 58Z
  2. @ dsdsdsdsd, вероятно, потому что для этого требуется еще один шаг обратной совместимости (сейчас я сталкиваюсь с той же проблемой).
    2014-01-28 11: 38: 14Z
  3. .is(":checked") и .prop("checked") являются допустимыми способами получения одинакового результата в jQuery, .is будет работать во всех версиях, .prop требуется 1.6 +
    2014-06-26 20: 50: 18Z
  4. Если вы используете .attr('checked') в jQuery 1.11.3, вы получите неопределенное значение, где, если вы используете .prop('checked'), вы получите true /false. Я не понимаю, почему они изменили его работу таким образом, когда более старые браузеры не могут поддерживать более поздние версии jQuery, которые ввели .prop() и, следовательно, нуждаются в .attr(). Единственное спасительное преимущество заключается в том, что более старые браузеры (т.е. IE 8) не могут ничего поддерживать > JQuery 1.9. Надеюсь, они этого не сделали (make .attr('checked') = undefined) в этой версии! К счастью, всегда есть this.checked.
    2015-06-19 16: 53: 26Z

jQuery 1.6 +

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

jQuery 1.5 и ниже

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

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

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

Вся заслуга принадлежит Сиань .

    
211
2017-05-23 12: 26: 29Z
  1. Технически, this.checked использует прямой Javascript. Но мне нравится этот кросс-jQuery-версия ответа!
    2015-06-19 16: 50: 35Z

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

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

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

    
157
2014-05-07 12: 18: 22Z
  1. Это работает, потому что $("# checkkBoxId"). attr ("checked") возвращает "checked" или "" (пустая строка). И пустая строка ложная, непустая строка правдивая, см. О значениях истина /ложь docs.nodejitsu.com/articles/javascript-conventions/…
    2013-07-12 07: 09: 07Z
  2. По jquery 2.1.x он возвращает всегда проверено, если проверено по умолчанию ... Я не знаю, является ли это поведение преднамеренным, но оно, безусловно, не работает (Я полагаю, это ошибка) ... val () тоже не работает, он остается включенным. Prop () работает правильно, и dom.checked тоже работает.
    2014-07-23 16: 19: 57Z
  3. И проблема возникает, когда вам необходимо поддерживать более старые браузеры с .attr()! Если бы они просто оставляли достаточно хорошо в одиночестве ... Найденный здесь другой ответ сказал, что вы можете просто использовать this.checked для решения кросс-jQuery, поскольку это просто Javascript.
    2015-06-19 16: 48: 48Z

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

<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
    
139
2018-06-15 07: 16: 33Z

Начиная с 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")
    
113
2016-10-30 17: 10: 20Z
  1. по какой-то причине prop ("checked") работал для меня, но не является (': checked')
    2012-06-11 20: 19: 56Z
  2. и $("# txtAge") [0] .checked
    2018-05-16 03: 52: 29Z

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

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

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

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

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

    
92
2017-05-23 12: 34: 51Z
  1. Во всех случаях во всех обычных языках программирования вы можете не указывать == true
    2019-04-14 20: 07: 51Z

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

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

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

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

    
84
2015-09-12 16: 10: 02Z
  1. почему бы не $('#isAgeSelected').checked?
    2015-10-27 14: 53: 21Z
  2. для использования .is вам нужно двоеточие $('# isAgeSelected'). is (': checked')
    2016-02-18 12: 44: 36Z

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

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

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

   if ($(this).is(':checked'))
     $("#txtAge").show();
   else
     $("#txtAge").hide();
});
    
58
2016-10-30 17: 09: 33Z
  1. Начиная с jQuery 1.7, .on() метод является предпочтительным методом для прикрепления обработчиков событий к документу.
    2013-09-11 07: 02: 39Z

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

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

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

    
54
2018-10-29 10: 25: 55Z

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

Вот вам скрипка для ее тестирования.

Добавление

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

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

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

    
51
2012-04-05 15: 50: 25Z
  1. Ну, .hidden не очень кросс-браузер, хотя мне нравится это решение:)
    2012-03-20 19: 59: 40Z
  2. Это действительно лучший способ использовать style. Однако это прискорбно, поскольку производительность .hidden составляет намного лучше .
    2012-03-21 09: 37: 06Z
  3. Назначение внутри условного оператора? Законно, да. Однако не то, что я бы назвал хорошим стилем.
    2012-04-05 12: 12: 26Z
  4. можно упростить до: ageInput.hidden =! this.checked; (Я ненавижу, когда люди используют логические литералы без необходимости ... если вы используете оба слова "true" и "false" в одном и том же простом утверждении, вероятно, нет необходимости использовать и то и другое)
    2015-03-06 20: 38: 14Z

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

if ($('#isAgeSelected :checked').size() > 0)
{
    $("#txtAge").show(); 
} else { 
    $("#txtAge").hide();
}
    
46
2009-05-23 15: 34: 24Z
  1. alert ($('input [name = isAgeSelected]'). attr ('флажок')); Приведенный выше код показывает true /false на основе проверки. Любая проблема с предыдущими попытками
    2009-05-23 15: 41: 43Z
  2. Прасад, вы ссылаетесь на свой флажок по имени или идентификатору? Я сейчас запутался ...
    2009-05-23 15: 52: 26Z
  3. я ссылался на него по имени
    2009-05-23 16: 08: 54Z
  4. Не можете ли вы дать ему идентификатор? Все было бы намного проще, в вашем примере вы обращаетесь к нему по его идентификатору
    2009-05-23 16: 10: 24Z
  5. Начиная с версии jQuery 1.8 метод .size () устарел. Вместо этого используйте .length (без свойства no () ;-)! И, может быть, вам нужно соединить "#isAgeSelected: флажок".
    2018-02-28 11: 17: 13Z

Есть много способов проверить, установлен ли флажок или нет:

Способ проверки с помощью jQuery

if (elem.checked)
if ($(elem).prop("checked"))
if ($(elem).is(":checked"))
if ($(elem).attr('checked'))

Проверьте пример или документ:

43
2016-10-30 17: 30: 42Z

Я столкнулся с точно такой же проблемой. У меня есть флажок 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 { ... }

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

    
42
2011-05-25 10: 59: 04Z

Это другой способ сделать то же самое:

р>

$(document).ready(function (){

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

        // Using a pure CSS selector
        if ($(this.checked)) {
            alert('on check 1');
        };

        // Using jQuery's is() method
        if ($(this).is(':checked')) {
            alert('on checked 2');
        };

        //  // Using jQuery's filter() method
        if ($(this).filter(':checked')) {
            alert('on checked 3');
        };
    });
});
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>
    
41
2016-10-30 17: 34: 28Z

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

/* isAgeSelected being id for checkbox */

$("#isAgeSelected").click(function(){
  $(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
});
    
39
2016-10-30 17: 08: 46Z

Используйте это:

if ($('input[name="salary_in.Basic"]:checked').length > 0)

Длина больше нуля, если флажок установлен.

    
35
2017-01-16 08: 51: 06Z

Вы можете использовать этот код:

$('#isAgeSelected').click(function(){
   console.log(this.checked);
   if(this.checked == true) {
        $("#txtAge").show();
    } else {
       $("#txtAge").hide();
   }
});
    
34
2016-10-30 17: 36: 57Z

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

if ( $("#checkbox:checked").length ) {       
    alert("checkbox is checked");
} else {
    alert("checkbox is not checked");
}
    
32
2015-04-06 20: 52: 33Z
$(selector).attr('checked') !== undefined

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

    
31
2013-03-21 11: 13: 00Z
  1. Я понимаю, почему это может работать в определенных сценариях, хотя оно имеет ту же проблему, что и .attr('checked'), в том, что оно не всегда возвращает правильное состояние. Согласно ответу (и, возможно, других), Salman A это более безопасный вариант вместо этого используйте .prop('checked'). Кроме того, можно также объявить undefined как var undefined = 'checked';.
    2013-04-05 00: 56: 27Z
  2. .prop('checked') теперь кажется лучшим ответом. Это не было так надежно в то время, когда это было написано. Я не понимаю и не думаю, что это хорошая идея переопределить undefined.
    2013-04-25 10: 02: 28Z
  3. В качестве примечания, проверка на неопределенность лучше с typeof (x) !== "undefined"
    2013-09-11 07: 05: 10Z
  4. В этом случае я считаю, что это более точно и легче читать с! ==. Я использовал бы typeof (x) только при тестировании переменной, которая могла или не могла быть определена в прошлом.
    2013-09-18 08: 04: 23Z
$(document).ready(function() {    
    $('#agecheckbox').click(function() {
        if($(this).is(":checked"))
        {
            $('#agetextbox').show();
        } else {
            $('#agetextbox').hide();
        }
    });
});
    
30
2014-11-26 15: 07: 01Z

Вы можете использовать:

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

Они оба должны работать.

    
30
2016-09-21 15: 21: 33Z

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

<input type="checkbox"  />

attr used:

$(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"

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

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

Используется опора:

$(element).prop("checked") // Will return true whether checked="checked"
    
26
2016-10-30 17: 25: 33Z
  1. Это РЕАЛЬНАЯ проблема. Мой обходной путь - добавьте событие изменения к входу: < input type = "checkbox" onchange = "ChangeChkBox ()" /> затем используйте это событие для изменения логической переменной JavaScript и используйте переменную JavaScript вместо прямого запроса флажка.
    2016-05-10 11: 33: 26Z

Этот пример для кнопки.

Попробуйте сделать следующее:

<input type="button" class="check" id="checkall" value="Check All" />  &nbsp; <input type="button" id="remove" value="Delete" /> <br/>

<input type="checkbox" class="cb-element"  value="1" /> Checkbox  1 <br/>
<input type="checkbox" class="cb-element"  value="2" /> Checkbox  2 <br/>
<input type="checkbox" class="cb-element"  value="3" /> Checkbox  3 <br/>


$('#remove').attr('disabled', 'disabled'); 

$(document).ready(function() {  

    $('.cb-element').click(function() {

        if($(this).prop('checked'))
        {
            $('#remove').attr('disabled', false);
        }
        else
        {
            $('#remove').attr('disabled', true);
        }
    });   

    $('.check:button').click(function()
{
    var checked = !$(this).data('checked');
    $('input:checkbox').prop('checked', checked);
    $(this).data('checked', checked);

    if(checked == true)
    {
        $(this).val('Uncheck All');
         $('#remove').attr('disabled', false);
    }

    else if(checked == false)
    {
        $(this).val('Check All');
        $('#remove').attr('disabled', true);
    }
});
});
    
24
2016-06-02 14: 17: 27Z

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

<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
2016-10-30 17: 12: 04Z

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

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

 $("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
    
22
2016-10-30 17: 22: 27Z

Несмотря на то, что вы предложили решение JavaScript для вашей проблемы (отображая textbox, когда checkbox равно checked), эту проблему можно решить только с помощью css . При таком подходе ваша форма работает для пользователей, которые отключили JavaScript.

Предполагая, что у вас есть следующий HTML:

<label for="show_textbox">Show Textbox</label>
<input id="show_textbox" type="checkbox" />
<input type="text" />

Вы можете использовать следующий CSS для достижения желаемой функциональности:

 #show_textbox:not(:checked) + input[type=text] {display:none;}

Для других сценариев вы можете подумать о соответствующих селекторах CSS.

Вот скрипка, демонстрирующая этот подход .

    
22
2016-10-30 17: 32: 58Z

Переключить: 0/1 или еще

<input type="checkbox" id="nolunch" />
<input id="checklunch />"

    $('#nolunch').change(function () {
    if ($(this).is(':checked')) {
        $('#checklunch').val('1');
    };
    if ($(this).is(':checked') == false) {
        $('#checklunch').val('0');
    };
});
    
21
2015-05-05 08: 48: 08Z

Я думаю, что это будет простой

$('#isAgeSelected').change(function() {
    if($(this).is(":checked")) {
        $('#txtAge').show();
    }
else{
        $('#txtAge').hide();
    }                                          
});
    
18
2015-06-04 05: 07: 16Z
источник размещен Вот
Другие вопросы