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

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

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

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

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

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

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

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

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

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

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

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>

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

$('#isAgeSelected').click(function(){
   console.log(this.checked);
   if(this.checked == true) {
        $("#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();

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

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

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

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"

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

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

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

<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') ), используя .attr('checked') . Если это тогда, то fadeIn в элементе #saveForm, и если не fadeOut элемент saveForm.

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

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

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

Переключить: 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 ($('#isAgeSelected :checked').size() > 0)
{
    $("#txtAge").show(); 
} else { 
    $("#txtAge").hide();
}

Хотя вы предложили решение JavaScript для своей проблемы (отображение textbox при checked checkbox ), эту проблему можно решить только 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(document.getElementById('isAgeSelected').checked)
    $("#txtAge").show();  
  else
    $("#txtAge").hide();

if($("#isAgeSelected").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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

или же

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

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

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

На самом деле, согласно jsperf.com , операции DOM jsperf.com , затем $ (). Prop (), за которыми следует $ (). jsperf.com () !!

Вот синтаксис:

var checkbox = $('#'+id);
/* OR var checkbox = $("input[name=checkbox1]"); whichever is best */

/* The DOM way - The fastest */
if(checkbox[0].checked == true)
   alert('Checkbox is checked!!');

/* Using jQuery .prop() - The second fastest */
if(checkbox.prop('checked') == true)
   alert('Checkbox is checked!!');

/* Using jQuery .is() - The slowest in the lot */
if(checkbox.is(':checked') == true)
   alert('Checkbox is checked!!');

Я лично предпочитаю .prop() . В отличие от .is() , его также можно использовать для установки значения.