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

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

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

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

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

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

3928
задан Prasad 23 мая '09 в 18:16
источник поделиться
58 ответов
  • 1
  • 2

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

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

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

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

Примечание. Это ответ использует Microsoft Ajax, а не jQuery

83
ответ дан Prasad 24 мая '09 в 8: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>
3106
ответ дан karim79 23 мая '09 в 18:20
источник поделиться

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

if($("#isAgeSelected").is(':checked'))
    $("#txtAge").show();  // checked
else
    $("#txtAge").hide();  // unchecked
1553
ответ дан Bhanu Krishnan 22 июня '11 в 13:14
источник поделиться

Использование 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
}
474
ответ дан SeanDowney 23 июня '11 в 20:29
источник поделиться

jQuery 1.6 +

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

jQuery 1.5 и ниже

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

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

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

Все кредиты относятся к Xian.

179
ответ дан ungalcrys 20 мая '14 в 23:03
источник поделиться

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

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

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

149
ответ дан Pradeep 19 авг. '10 в 16:38
источник поделиться

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

<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
117
ответ дан Lalji Dhameliya 29 авг. '16 в 14:38
источник поделиться

Так как 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")
106
ответ дан Salman A 27 апр. '12 в 14:54
источник поделиться

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

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

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

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

80
ответ дан Rajesh Omanakuttan 25 авг. '13 в 6:11
источник поделиться

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

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

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

   if ($(this).is(':checked'))
     $("#txtAge").show();
   else
     $("#txtAge").hide();
});
55
ответ дан arviman 06 окт. '11 в 4:12
источник поделиться

Я решил опубликовать ответ о том, как сделать то же самое без 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;
};

Сначала вы получаете оба элемента по их идентификатору. Затем вы назначаете checkboxe onchange событие функцию, которая проверяет, установлен ли флажок, и соответствующим образом устанавливает свойство hidden текстового поля возраста. В этом примере используется тернарный оператор.

Вот вам fiddle, чтобы проверить его.

Добавление

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

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

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

50
ответ дан Octavian Damiean 20 марта '12 в 22:19
источник поделиться

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

if ($('#isAgeSelected :checked').size() > 0)
{
    $("#txtAge").show(); 
} else { 
    $("#txtAge").hide();
}
40
ответ дан xenon 23 мая '09 в 18:34
источник поделиться

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

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

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

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

38
ответ дан Parth Chavda 14 окт. '14 в 10:48
источник поделиться

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

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

37
ответ дан Nertim 16 дек. '10 в 21:50
источник поделиться

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

/* isAgeSelected being id for checkbox */

$("#isAgeSelected").click(function(){
  $(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
});
35
ответ дан ashish amatya 06 янв. '11 в 14:33
источник поделиться

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

$(document).ready(function (){

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

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

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

        //  // Using jQuery 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>
33
ответ дан Sangeet Shah 24 авг. '15 в 15:19
источник поделиться

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

if ( $("#checkbox:checked").length ) {       
    alert("checkbox is checked");
} else {
    alert("checkbox is not checked");
}
30
ответ дан Dalius I 06 февр. '12 в 17:31
источник поделиться
$(document).ready(function() {    
    $('#agecheckbox').click(function() {
        if($(this).is(":checked"))
        {
            $('#agetextbox').show();
        } else {
            $('#agetextbox').hide();
        }
    });
});
30
ответ дан Jumper Pot 25 нояб. '14 в 15:25
источник поделиться

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

$('#isAgeSelected').click(function(){
   console.log(this.checked);
   if(this.checked == true) {
        $("#txtAge").show();
    } else {
       $("#txtAge").hide();
   }
});
30
ответ дан sandeep kumar 13 окт. '16 в 9:03
источник поделиться
$(selector).attr('checked') !== undefined

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

30
ответ дан fe_lix_ 12 февр. '12 в 18:15
источник поделиться

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

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

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

29
ответ дан Hamid N K 27 июля '16 в 12:46
источник поделиться

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

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

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

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

28
ответ дан Muhammad Awais 28 апр. '16 в 15:07
источник поделиться

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

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

<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
ответ дан usayee 03 янв. '14 в 13:38
источник поделиться

Главный ответ не сделал этого для меня. Это произошло, хотя:

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

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

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

23
ответ дан MDMoore313 10 дек. '12 в 8:02
источник поделиться

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

<input type="checkbox"  />

attr:

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

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

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

Используемый Prop:

$(element).prop("checked") // Will return true whether checked="checked"
23
ответ дан Somnath Kharat 30 окт. '13 в 15:43
источник поделиться

Переключить: 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
ответ дан user2385302 08 янв. '15 в 16:10
источник поделиться

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

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

 $("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
19
ответ дан Nishant Kumar 06 сент. '13 в 9:43
источник поделиться

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

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

19
ответ дан Ormoz 22 авг. '15 в 22:09
источник поделиться
if($("#checkkBoxId").is(':checked')){
  alert("Checked=true");
}

или

if($("#checkkBoxId").attr('checked') == true){
  alert("checked=true");
}
16
ответ дан ijarlax 10 июня '13 в 16:12
источник поделиться

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

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

$('input[type=checkbox]:checked')
15
ответ дан Tsonev 15 нояб. '13 в 13:50
источник поделиться
  • 1
  • 2

Другие вопросы по меткам или Задайте вопрос