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

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

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

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

    if (checked == 0) {
        return false;
    } else {
        return true;
    }
}

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

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

$('#' + id).is(":checked")

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

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

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

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

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

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

$boxes.length;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

elem.checked 

$(elem).prop("checked") 

$(elem).is(":checked") 

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

if($("#checkboxId").is(':checked')){
     // Code in the case checkbox is checked.
} else {
     // Code in the case checkbox is NOT checked.
}

В соответствии с документацией 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

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

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

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

if ( elem.checked ) {};
if ( $( elem ).prop( "checked" ) ) {};
if ( $( elem ).is( ":checked" ) ) {};

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

document.getElementById("myCheck").checked

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

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

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

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

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

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

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

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

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

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

Просто в моем примере ситуация была диалоговым окном, которое затем проверяло флажок перед закрытием диалога. Ничего из вышеперечисленного и Как проверить, установлен ли флажок в 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 на этой странице. Обходной путь был выше.

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

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

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

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

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

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

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

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

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

$("#checkall").click(function(){
    $("input:checkbox").prop( 'checked',$(this).is(":checked") );
})

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

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

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

С середины 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>

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

this[id].checked

function isCheckedById(id) {
  return this[id].checked;
}

function check() {
  console.clear()
  console.log('1',isCheckedById("myCheckbox1"));
  console.log('2',isCheckedById("myCheckbox2"));
  console.log('3',isCheckedById("myCheckbox3"));
}

<label><input id="myCheckbox1" type="checkbox">check 1</label>
<label><input id="myCheckbox2" type="checkbox">check 2</label>
<label><input id="myCheckbox3" type="checkbox">check 3</label>
<!-- label around inputs makes text clickable -->
<br>
<button onclick="check()">show checked</button>

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

<script>

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

function ShowMailSection() {
  if ($("[id$='chkSendMail'][type='checkbox']:checked").length >0){
      $("[id$='SecEmail']").removeClass("Hide");
  }
</script>