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

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

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

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

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

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

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

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

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

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

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

• jQuery.attr()

• jQuery.prop()

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

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

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

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

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

<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's is() :

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

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

if ( $("#checkbox:checked").length ) {       
    alert("checkbox is checked");
} else {
    alert("checkbox is not 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');
    };
});

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

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

if($("#isAgeSelected").is(':checked'))
  $("#txtAge").show();  
else
  $("#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>

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

/* isAgeSelected being id for checkbox */

$("#isAgeSelected").click(function(){
  $(this).is(':checked') ? $("#txtAge").show() : $("#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);
    }
});
});

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

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

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

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

 $("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#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;
};

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

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

добавление

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

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

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

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

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

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"

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

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

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