Проверьте, установлен ли флажок с помощью jQuery

1190

Как проверить, установлен ли флажок в массиве флажков с помощью идентификатора массива флажков?

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

function isCheckedById(id) {
    alert(id);
    var checked = $("input[@id=" + id + "]:checked").length;
    alert(checked);

    if (checked == 0) {
        return false;
    } else {
        return true;
    }
}
Джейк
источник
Массив флажок ? Никогда не слышал о такой вещи. Это что-то специфичное для JQuery, или плагин / виджет?
Пекка
2
массив флажков означает что-то вроде: <input type = "checkbox" name = "chk []" id = "chk []" value = "apple"> <input type = "checkbox" name = "chk []" id = "chk []" value = "banana"> <input type = "checkbox" name = "chk []" id = "chk []" value = "orange"> и т.д ..
Джейк
2
что не так с массивом флажков? как еще вы могли бы сделать ввод "проверить все, что применимо"?
Nickf
5
Убедитесь, что ваши idуникальны! nameможет (и должен, в этом случае) повториться, но вы обнаружите много странных вещей, происходящих, если вы продублируете id! = D
Джефф Руперт
Я должен был удалить "@", чтобы он работал. Кроме того, вы можете уменьшить последние 5 строк до 1: return (флажок! = 0);
Б. Клэй Шеннон

Ответы:

692

Идентификаторы должны быть уникальными в вашем документе, это означает, что вы не должны делать это:

<input type="checkbox" name="chk[]" id="chk[]" value="Apples" />
<input type="checkbox" name="chk[]" id="chk[]" value="Bananas" />

Вместо этого удалите идентификатор, а затем выберите их по имени или по содержащему элементу:

<fieldset id="checkArray">
    <input type="checkbox" name="chk[]" value="Apples" />

    <input type="checkbox" name="chk[]" value="Bananas" />
</fieldset>

А теперь JQuery:

var atLeastOneIsChecked = $('#checkArray:checkbox:checked').length > 0;
//there should be no space between identifier and selector

// or, without the container:

var atLeastOneIsChecked = $('input[name="chk[]"]:checked').length > 0;
nickf
источник
У меня работало без двойных кавычек на вводимом имени: input [name = multiplecheck []]: проверено, спасибо!
Алехандро Кироз
30
Зачем использовать, $('#checkArray :checkbox:checked').length > 0;когда более простое $('#checkArray').checkedработает и доступно в нескольких версиях?
Дон Чидл
5
@ Странно, это работает, но не на объекте jquery. вместо $ (elem) .checked попробуйте elem.checked.
Дэн Уильямс
1
@DanWilliams да, но не в том примере, который дал mmcrae.
Оддман
Второй работал на меня. Спасибо!! var atLeastOneIsChecked = $('input[name="chk[]"]:checked').length > 0;
Дэвид Сильва-Баррера
2027
$('#' + id).is(":checked")

Это происходит, если флажок установлен.

Для массива флажков с тем же именем вы можете получить список проверенных:

var $boxes = $('input[name=thename]:checked');

Затем, чтобы просмотреть их и посмотреть, что проверено, вы можете сделать:

$boxes.each(function(){
    // Do stuff here with this
});

Чтобы узнать, сколько проверено, вы можете сделать:

$boxes.length;
Джон Бокер
источник
2
Другой способ $('#'+id).attr('checked'), который эквивалентен, $('#' + id).is(":checked")но легче запомнить IMO.
Зубин
85
@ Зубин: будь осторожен с .attr('checked'). Его поведение изменилось в jQuery 1.6. Раньше возвращался falseили true. Теперь это возвращает undefinedили "checked". .is(':checked')не имеет этой проблемы.
Джои Адамс
1
@ Джон Бокер: извините за комментарий некро, но почему это $('.ClassName').is(':checked')не работает, а $('#' + id).is(":checked")работает? кроме того, что один ищет по id и один по имени класса.
Mike_OBrien
@Mike_OBrien Проблема может заключаться в том, что существует несколько флажков с этим именем класса. Is (': checked') действительно работает только с одним элементом.
Джон Бокер
5
Примечание: size () устарела с jQuery 1.8 - используйте вместо этого .length
JM4
312
$('#checkbox').is(':checked'); 

Приведенный выше код возвращает true, если флажок установлен, или false, если нет.

Прасанна Ротти
источник
7
очень полезно при использовании $ (this) .is (': флажок'); Спасибо!
PinoyStackOverflower
Этот способ полезен, чтобы проверить, если флажок установлен, где вы знаете, как его выбрать, спасибо
Омар Исаид
Это сработало для меня, я использовал это раньше, var isChecked = $('#CheckboxID').attr('checked') ? true : false; но не всегда возвращал правильное значение. Тогда спасибо!
leiit
121

Все следующие методы полезны:

$('#checkbox').is(":checked")

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

$('#checkbox')[0].checked

$('#checkbox').get(0).checked

Рекомендуется избегать DOMelement или встроенного «this.checked», вместо этого следует использовать jQuery on для метода прослушивания событий.

justnajm
источник
98

Код jQuery, чтобы проверить, установлен ли флажок или нет:

if($('input[name="checkBoxName"]').is(':checked'))
{
  // checked
}else
{
 // unchecked
}

В качестве альтернативы:

if($('input[name="checkBoxName"]:checked'))
{
    // checked
}else{
  // unchecked
}
Кундан Рой
источник
4
Первое решение отсутствует :... Исправьте одно: if(('input[name="checkBoxName"]').is(':checked')).
Aerendir
Отсутствует знак доллара ($), так и должно быть if($('input[name="checkBoxName"]').is(':checked')).
Пенни Лю
Второй никогда не будет запускать elseблок, поскольку объект jQuery, даже если он не содержит совпадающих элементов, является «правдивым». Добавьте .lengthв конец, тогда вы говорите.
Еретик Обезьяна
69

Наиболее важная концепция, которую следует помнить о проверенном атрибуте, заключается в том, что он не соответствует проверенному свойству. Атрибут фактически соответствует свойству defaultChecked и должен использоваться только для установки начального значения флажка. Проверенное значение атрибута не изменяется с состоянием флажка, в то время как проверяемое свойство изменяется. Следовательно, кросс-браузер-совместимый способ определения того, установлен ли флажок, заключается в использовании свойства

Возможны все нижеуказанные методы

elem.checked 

$(elem).prop("checked") 

$(elem).is(":checked") 
Технарь
источник
38

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

if($("#checkboxId").is(':checked')){
     // Code in the case checkbox is checked.
} else {
     // Code in the case checkbox is NOT checked.
}
Мохаммед Шахин МК
источник
29

В соответствии с документацией jQuery существуют следующие способы проверить, установлен флажок или нет. Давайте рассмотрим флажок для примера (Проверьте Работающий jsfiddle со всеми примерами)

<input type="checkbox" name="mycheckbox" id="mycheckbox" />
<br><br>
<input type="button" id="test-with-checked" value="Test with checked" />
<input type="button" id="test-with-is" value="Test with is" />
<input type="button" id="test-with-prop" value="Test with prop" />

Пример 1 - С проверено

$("#test-with-checked").on("click", function(){
    if(mycheckbox.checked) {
        alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
}); 

Пример 2 - с jQuery есть, ПРИМЕЧАНИЕ -: проверено

var check;
$("#test-with-is").on("click", function(){
    check = $("#mycheckbox").is(":checked");
    if(check) {
        alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
}); 

Пример 3 - с помощью jQuery prop

var check;
$("#test-with-prop").on("click", function(){
    check = $("#mycheckbox").prop("checked");
    if(check) {
         alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
}); 

Проверьте рабочий jsfiddle

Subodh Ghulaxe
источник
26

Вы можете попробовать это:

<script>
function checkAllCheckBox(value)
{
   if($('#select_all_').is(':checked')){
   $(".check_").attr ( "checked" ,"checked" );
    }
    else
    {
        $(".check_").removeAttr('checked');
    }

 }

</script>
<input type="checkbox" name="chkbox" id="select_all_" value="1" />


<input type="checkbox" name="chkbox" class="check_" value="Apples" />
<input type="checkbox" name="chkbox" class="check_" value="Bananas" />
<input type="checkbox" name="chkbox" class="check_" value="Apples" />
<input type="checkbox" name="chkbox" class="check_" value="Bananas" />
Вишну Шарма
источник
Это больше не является хорошим способом ведения дел, поскольку attrотражает только значение атрибута в HTML, а не значение свойства в DOM. Смотрите документацию дляattr , где он говорит : « Для того, чтобы получать и изменять свойства DOM , такие как checked, selectedили disabledсостояние форменных элементов, используйте .prop()метод.», А также документация дляprop , где он говорит , что « .prop()метод должен быть использован для набора disabledи checkedвместо от .attr()метода «.
Еретик Обезьяна
21

Вы можете использовать любой из следующих рекомендуемых кодов jquery.

if ( elem.checked ) {};
if ( $( elem ).prop( "checked" ) ) {};
if ( $( elem ).is( ":checked" ) ) {};
endur
источник
20

Я знаю, что OP хочет jquery, но в моем случае чистый JS был ответом, поэтому, если кто-то вроде меня здесь и не имеет jquery или не хочет его использовать - вот ответ JS:

document.getElementById("myCheck").checked

Он возвращает true, если вход с идентификатором myCheck отмечен, и false, если не проверен.

Просто как тот.

скомбинировать
источник
11
это означает, что $("#myCheck")[0].checkedбудет работать в jquery! : D
Санкарн
10

Вы можете сделать это просто как;

Рабочая скрипка

HTML

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

JQuery

$(document).ready(function () {
    var ckbox = $('#checkbox');

    $('input').on('click',function () {
        if (ckbox.is(':checked')) {
            alert('You have Checked it');
        } else {
            alert('You Un-Checked it');
        }
    });
});

или даже проще;

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

Если checkboxфлажок установлен, он вернется в trueпротивном случаеundefined

Аамир Шахзад
источник
or even simpler;->$("#checkbox").checked
Дон Чидл
10

Я также часто использую эту идею:

var active = $('#modal-check-visible').prop("checked") ? 1 : 0 ;

Если проверено, он вернет 1; в противном случае он вернет 0.

Rtronic
источник
7

Простая демонстрация для проверки и установки флажка.

jsfiddle !

$('.attr-value-name').click(function() {
    if($(this).parent().find('input[type="checkbox"]').is(':checked'))
    {
        $(this).parent().find('input[type="checkbox"]').prop('checked', false);
    }
    else
    {
        $(this).parent().find('input[type="checkbox"]').prop('checked', true);
    }
});
Иллюзия
источник
7

Просто в моем примере ситуация была диалоговым окном, которое затем проверяло флажок перед закрытием диалога. Ничего из вышеперечисленного и Как проверить, установлен ли флажок в jQuery? и jQuery, если флажок установлен, тоже не работает.

В конце

<input class="cb" id="rd" type="checkbox">
<input class="cb" id="fd" type="checkbox">

var fd=$('.cb#fd').is(':checked');
var rd= $('.cb#rd').is(':checked');

Это сработало, вызывая класс, а затем идентификатор. а не только удостоверение личности. Это может быть связано с тем, что проблема связана с вложенными элементами DOM на этой странице. Обходной путь был выше.

В.Х.
источник
6

Для флажка с идентификатором

<input id="id_input_checkbox13" type="checkbox"></input>

ты можешь просто сделать

$("#id_input_checkbox13").prop('checked')

Вы получите trueили falseкак возвращаемое значение для вышеуказанного синтаксиса. Вы можете использовать его в предложении if как обычное логическое выражение.

Аникет Тхакур
источник
5

Нечто подобное может помочь

togglecheckBoxs =  function( objCheckBox ) {

    var boolAllChecked = true;

    if( false == objCheckBox.checked ) {
        $('#checkAll').prop( 'checked',false );
    } else {
        $( 'input[id^="someIds_"]' ).each( function( chkboxIndex, chkbox ) {
            if( false == chkbox.checked ) {
                $('#checkAll').prop( 'checked',false );
                boolAllChecked = false;
            }
        });

        if( true == boolAllChecked ) {
            $('#checkAll').prop( 'checked',true );
        }
    }
}
Абдул Хамид
источник
5

На самом деле, согласно данным jsperf.com , DOM-операции выполняются быстрее, чем $ (). Prop (), а затем $ (). Is () !!

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

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(), он также может быть использован для установки значения.

Черная пантера
источник
4

Переключатель установлен

$("#checkall").click(function(){
    $("input:checkbox").prop( 'checked',$(this).is(":checked") );
})
sourceboy
источник
2

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

Ссылка Ссылка

<label class="control-label col-sm-4">Check Box 2</label>
    <input type="checkbox" name="checkbox2" id="checkbox21" value=ck1 /> ck1<br />
    <input type="checkbox" name="checkbox2" id="checkbox22" value=ck2 /> ck2<br />

<label class="control-label col-sm-4">Check Box 3</label>
    <input type="checkbox" name="checkbox3" id="checkbox31" value=ck3 /> ck3<br />
    <input type="checkbox" name="checkbox3" id="checkbox32" value=ck4 /> ck4<br />

<script>
function checkFormData() {
    if (!$('input[name=checkbox2]:checked').length > 0) {
        document.getElementById("errMessage").innerHTML = "Check Box 2 can not be null";
        return false;
    }
    if (!$('input[name=checkbox3]:checked').length > 0) {
        document.getElementById("errMessage").innerHTML = "Check Box 3 can not be null";
        return false;
    }
    alert("Success");
    return true;
}
</script>
Парт Патель
источник
Основная информация: идентификаторы html-элементов не повторяются (например: id = "checkbox2", id = "checkbox3"). Это не очень хорошая практика. Мы можем использовать класс несколько раз на странице.
Ананд Сомасехар
1

С середины 2019 года jQuery иногда отходит на второй план к таким вещам, как VueJS, React и т. Д. Вот простой ванильный вариант прослушивателя Javascript onload:

<script>
  // Replace 'admincheckbox' both variable and ID with whatever suits.

  window.onload = function() {
    const admincheckbox = document.getElementById("admincheckbox");
    admincheckbox.addEventListener('click', function() {
      if(admincheckbox.checked){
        alert('Checked');
      } else {
        alert('Unchecked');
      }
    });
  }
</script>
Грант
источник
0

Ваш вопрос не ясен: вы хотите указать «идентификатор массива флажков» при вводе и получить true/falseпри выводе - таким образом, вы не будете знать, какой флажок был установлен (как предполагает название вашей функции). Итак, ниже есть мое предложение вашего тела, isCheckedByIdкоторое при входе принимает флажок idи при выходе возвращает true/false(это очень просто, но ваш идентификатор не должен быть ключевым словом),

this[id].checked

Камил Келчевски
источник
-7

используйте код ниже

<script>

$(document).ready(function () {
  $("[id$='chkSendMail']").attr("onchange", "ShowMailSection()");
}

function ShowMailSection() {
  if ($("[id$='chkSendMail'][type='checkbox']:checked").length >0){
      $("[id$='SecEmail']").removeClass("Hide");
  }
</script>
Code_Worm
источник
В самом деле? Как насчет$(function() { $("[id$='chkSendMail']").on("change", ShowMailSection); });
mplungjan
И все они чекбоксы, поэтому $("[id$='chkSendMail']:checked]")должны работать нормально
mplungjan