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

4552

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

Прасад
источник
14
$ ('# isAgeSelected') возвращает коллекцию, замените ее на: $ ('# isAgeSelected') [0] .checked
zamoldar
14
почему нет$('#isAgeSelected').checked
Дон Чидл
1
Для полного (и правильного) ответа см .: stackoverflow.com/questions/426258/…
Пол Кенджора
12
Поскольку селекторы jQuery возвращают массив, вы можете использовать$('#isAgeSelected')[0].checked
Felipe Leão
2
для меня сработал следующий твик: замените .attr («проверил») на .is («: проверил»)
Марк Н Хопгуд

Ответы:

3434

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

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>

karim79
источник
36
я тоже пробовал вышеупомянутое условие, но оно возвращает только ложь
Прасад
24
. $ ( "# txtAge") тумблер (this.checked); Делает точно так же, как $ ("# txtAge"). Toggle (). Итак, если по какой-то причине состояние проверено, а следующий div скрыт (вы нажали кнопку назад в браузере) - он не будет работать должным образом.
Максим Ви.
23
@Chiramisu - Если бы вы прочитали ответ полностью, вы бы заметили, что мое редактирование не использует is(':checked')бизнес.
karim79
8
установить: $ ("# chkmyElement") [0] .checked = true; получить: if ($ ("# chkmyElement") [0] .checked)
JJ_Coder4Hire
28
Это не ответ на вопрос. this.checkedэто не jQuery, как того требует ОП. Кроме того, это работает только тогда, когда пользователь нажимает на флажок, который не является частью вопроса. Вопрос, опять же, How to check whether a checkbox is checked in jQuery?в любой момент времени с или без установки флажка и в jQuery.
Марк
1848

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

if($("#isAgeSelected").is(':checked'))
    $("#txtAge").show();  // checked
else
    $("#txtAge").hide();  // unchecked
Бхану Кришнан
источник
19
Если вам не нужна длительность, смягчение и т. Д., Вы можете использовать $("#txtAge").toggle($("#isAgeSelected").is(':checked'))
naor
13
+1 есть разные способы получить проверенную недвижимость. Некоторые из них перечислены здесь
user3199690
На самом деле @NickG JQuery делает есть : видимый селектор
hvdd
2
@hvdd я знаю - я сказал "собственность", а не селектор.
NickG
@ Ник ... Я не понимаю, что ты имеешь в виду. У jQuery нет .visible«свойства» ( свойство ? Вы имеете в виду метод ?), потому что элемент без HTML имеет видимое свойство. У них есть display свойство стиля, и это немного сложнее, чем вкл / выкл.
xDaizu
567

Использование 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
}
SeanDowney
источник
27
Я хотел бы знать, почему это не ответ ... если вы вообще используете jquery, то .propметод - это спроектированный способ проверки реквизита. ... ... Если вы собираетесь использовать этот .is(":checked")подход, это нормально, но это не спроектированный способ сделать это с помощью jquery. правильно?
dsdsdsdsd
1
@dsdsdsdsd предположительно потому, что для этого нужен еще один шаг обратной совместимости (сейчас я сталкиваюсь с той же проблемой).
user98085
18
.is(":checked")и .prop("checked")оба являются действительными способами получить тот же результат в jQuery, .isбудут работать во всех версиях, .propтребуется 1.6+
gnarf
Если вы используете .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
230

JQuery 1.6+

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

JQuery 1,5 и ниже

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

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

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

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

ungalcrys
источник
8
Технически, this.checkedиспользуется прямой Javascript. Но мне нравится этот кросс-jQuery-версия ответа!
vapcguy
170

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

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

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

Pradeep
источник
6
Это работает, потому что $ ("# checkkBoxId"). Attr ("флажок") возвращает "проверено" или "" (пустая строка). И пустая строка ложная, непустая строка правдивая, см. О значениях истина / ложь docs.nodejitsu.com/articles/javascript-conventions/…
Adrien Be
7
По jquery 2.1.x он возвращает всегда проверено, если он проверен по умолчанию ... Я не знаю, является ли это поведение преднамеренным, но это, безусловно, не работает (я думаю, это ошибка) ... Val () тоже не работает, остается включенным. Prop () работает правильно, и dom.checked тоже работает.
inf3rno
1
И проблема возникает, когда вам нужно поддерживать старые браузеры с .attr()! Если бы они просто оставили достаточно хорошо в одиночестве ... Нашел здесь другой ответ, в котором сказано, что вы можете просто использовать this.checkedэто решение для кросс-jQuery, поскольку это просто Javascript.
vapcguy
.attr ('флажок') проверит, установлен ли он по умолчанию, да. Потому что он проверяет атрибут html , а не текущее состояние. Предыдущая версия была ошибкой (хотя я полагаю, что она сильно использовалась).
Джей Ирвин
149

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

<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

Lalji Dhameliya
источник
119

Начиная с 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")
Salman A
источник
и $ ("# txtAge") [0] .checked
Евгений Афанасьев
101

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

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

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

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

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

Прасад
источник
4
Во всех случаях, во всех обычных языках программирования, вы можете опустить== true
RedPixel
@RedPixel Если вы не имеете дело с обнуляемыми типами. :) (педантичный смайлик)
Каньон Колоб
88

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

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

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

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

Раджеш Оманакуттан
источник
почему нет $('#isAgeSelected').checked?
Дон Чидл
1
чтобы использовать .is вам нужно двоеточие $ ('# isAgeSelected'). is (': checked')
Патрик
62

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

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

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

   if ($(this).is(':checked'))
     $("#txtAge").show();
   else
     $("#txtAge").hide();
});
arviman
источник
3
Начиная с jQuery 1.7, .on()метод является предпочтительным методом для прикрепления обработчиков событий к документу.
13:02
61

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

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

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

UDB
источник
53

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

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

добавление

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

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

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

Октавиан А. Дамиан
источник
Ну, .hiddenне очень кросс-браузер, хотя мне нравится это решение :)
Florian Margaine
Это действительно лучший способ использования style. Это прискорбно, так как .hiddenпроизводительность намного лучше .
Флориан Маргэйн
Назначение внутри условного оператора? Законно, да. Однако не то, что я бы назвал хорошим стилем.
Жюль
можно упростить до: ageInput.hidden =! this.checked; (Я ненавижу, когда люди используют логические литералы без необходимости ... если вы используете и "true", и "false" в одном и том же простом утверждении, вероятно, нет необходимости использовать и то и другое)
JoelFan
52

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

if ($('#isAgeSelected :checked').size() > 0)
{
    $("#txtAge").show(); 
} else { 
    $("#txtAge").hide();
}
ксенон
источник
оповещения ($ ( 'вход [имя = isAgeSelected]') атр ( 'проверено').); Код выше показывает true / false на основе проверки. Любая проблема с предыдущими попытками
Прасад
Прасад, вы ссылаетесь на свой флажок по имени или идентификатору? Я запутался сейчас ...
karim79
Вы не можете дать ему удостоверение личности? Все было бы намного проще, в вашем примере у вас есть адрес по его идентификатору
ксенон
Начиная с версии jQuery 1.8 метод .size () устарел. Вместо этого используйте свойство .length (без свойства no () ;-)! И, может быть, вы должны склеить "#isAgeSelected: проверено".
Франсуа Бретон
47

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

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

Nertim
источник
46

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

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

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

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

Parth Chavda
источник
46

Этот код поможет вам

$('#isAgeSelected').click(function(){
   console.log(this.checked);
   if(this.checked == true) {
        $("#txtAge").show();
    } else {
       $("#txtAge").hide();
   }
});
sandeep kumar
источник
42

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

/* isAgeSelected being id for checkbox */

$("#isAgeSelected").click(function(){
  $(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
});
ashish amatya
источник
41

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

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

Sangeet Shah
источник
35

Использовать этот:

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

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

Hamid NK
источник
33

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

if ( $("#checkbox:checked").length ) {       
    alert("checkbox is checked");
} else {
    alert("checkbox is not checked");
}
Dalius I
источник
31
$(selector).attr('checked') !== undefined

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

Феликс_
источник
4
Я понимаю, почему это может работать в определенных сценариях, хотя имеет ту же проблему, .attr('checked')что и то, что оно не всегда возвращает правильное состояние. Согласно Салман A «s ответ (и , возможно , других»), это более безопасный вариант, чтобы использовать .prop('checked')вместо. Кроме того, также можно объявить undefinedкак var undefined = 'checked';.
WynandB
.prop('checked')действительно кажется лучшим ответом сейчас. Это не было так надежно в то время, когда это было написано. Я не понимаю и не думаю, что это хорошая идея переопределить неопределенное.
fe_lix_
Как примечание, проверка на неопределенность лучше сtypeof (x) !== "undefined"
naor
В этом случае я считаю, что это более точно и легче читать! ==. Я бы использовал typeof (x) только при тестировании переменной, которая может быть или не быть определена в прошлом.
fe_lix_
30
$(document).ready(function() {    
    $('#agecheckbox').click(function() {
        if($(this).is(":checked"))
        {
            $('#agetextbox').show();
        } else {
            $('#agetextbox').hide();
        }
    });
});
Jumper Pot
источник
30

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

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

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

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

Muhammad Awais
источник
27

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"
Сомнатх Кхарат
источник
Это НАСТОЯЩАЯ проблема. Мой обходной путь - добавьте событие изменения к входу: <input type = "checkbox" onchange = "ChangeChkBox ()" /> затем используйте это событие для изменения логической переменной JavaScript и используйте переменную JavaScript вместо прямого запроса флажка.
Грэм Лайт
24

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

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

<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);
    }
});
});
usayee
источник
24

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

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

BigHomie
источник
22

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

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

 $("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
Nishant
источник
22

Хотя вы предложили решение 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.

Вот скрипка, чтобы продемонстрировать этот подход .

Ormoz
источник
21

Переключить: 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');
    };
});
user2385302
источник
19

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

$('#isAgeSelected').change(function() {
    if($(this).is(":checked")) {
        $('#txtAge').show();
    }
else{
        $('#txtAge').hide();
    }                                          
});
Джитендра Дамор
источник