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

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

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

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

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

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

Всего 29 ответов


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

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

Использование jQuery> 1.6

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

Используя новый метод свойства:

<input type="checkbox" value="1" name="checkMeOut" id="checkMeOut" checked="checked" />

// traditional attr
$('#checkMeOut').attr('checked'); // "checked"
// new property method
$('#checkMeOut').prop('checked'); // true

JQuery 1.6+

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

JQuery 1,5 и ниже

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

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

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

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








Я решил опубликовать ответ о том, как сделать то же самое без jQuery. Просто потому, что я бунтарь.

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

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

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

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

добавление

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

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

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


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

elem.style.display = this.checked ? 'inline' : 'none'
<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
  }
})

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

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

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

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


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

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

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

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

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

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

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


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

 $(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 ($("'#cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }

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

/* isAgeSelected being id for checkbox */

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

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


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

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

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

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


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

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

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

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

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


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

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

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

<input type="checkbox"  />

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

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

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

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

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

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

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

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

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


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

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

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

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

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

    $('#nolunch').change(function () {
    if ($(this).is(':checked')) {
        $('#checklunch').val(Ƈ');
    };
    if ($(this).is(':checked') == false) {
        $('#checklunch').val(Ɔ');
    };
});

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

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

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

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

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

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

Есть идеи?

10000