Поставте прапорець, чи встановлено прапорець 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'); 

Вищевказаний код повертає істину, якщо прапорець встановлений, або помилковий, якщо ні.

Усі наступні методи корисні:

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

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

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

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

Рекомендується уникати DOMelement або вбудованого "this. перевіреного" замість того, щоб jQuery за методом використовувався слухачем подій.

Код 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

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

Я знаю, що ОП хочу jquery, але в моєму випадку чистий JS був відповіддю, тому якщо хтось, як я, тут і не має jquery або не хоче його використовувати - ось відповідь JS:

document.getElementById("myCheck").checked

Він повертає істину, якщо вхід з ідентифікатором myCheck встановлено, і помилково, якщо він не встановлений.

Просто як це.

Ви можете це робити просто так;

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

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як повернене значення для вище синтаксису. Ви можете використовувати його, якщо в якості пункту як нормального булевого вираження.

Щось подібне може допомогти

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:

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