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

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

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

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

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

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

30 ответов


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

на checked свойство элемента checkbox 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>

используйте jQuery is ():

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

использование 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

использование метода new property:

if($('#checkMeOut').prop('checked')) {
    // something when checked
} else {
    // something else when not
}

jQuery 1.6+

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

в jQuery 1.5 и ниже

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

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

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

все Сиань.


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

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

Примечание: если флажок установлен, он вернет true в противном случае неопределенным, поэтому лучше проверить значение "TRUE".


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

<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

начиная с 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")

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

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

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

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

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


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

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

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

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


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

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

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

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

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

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

дополнительное соглашение

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

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

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


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

if ($('#isAgeSelected :checked').size() > 0)
{
    $("#txtAge").show(); 
} else { 
    $("#txtAge").hide();
}

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

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

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

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


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

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

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

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

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

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

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


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

/* isAgeSelected being id for checkbox */

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

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

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

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

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

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


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

$('#isAgeSelected').click(function(){
   console.log(this.checked);
   if(this.checked == true) {
        $("#txtAge").show();
    } else {
       $("#txtAge").hide();
   }
});

$(selector).attr('checked') !== undefined

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


$(document).ready(function() {    
    $('#agecheckbox').click(function() {
        if($(this).is(":checked"))
        {
            $('#agetextbox').show();
        } else {
            $('#agetextbox').hide();
        }
    });
});

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

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

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

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

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

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


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

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

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

верхний ответ не сделал этого для меня. Однако это:

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

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

в основном, когда элемент #li_13 нажат, он проверяет, установлен ли элемент # agree (который является флажком) с помощью


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"
пропеллер:
$(element).prop("checked") // Will return true whether checked="checked"

переключение: 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');
    };
});

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

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

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

хотя вы предложили решение JavaScript для своей проблемы (отображение textbox когда checkbox is 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 селекторы.

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


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

или

if($("#checkkBoxId").attr('checked') == true){
  alert("checked=true");
}

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

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