JQuery ile onay kutusunun işaretli olup olmadığını kontrol edin

Onay kutusu dizisindeki bir onay kutusunun onay kutusu dizisinin kimliğini kullanarak işaretli olup olmadığını nasıl kontrol edebilirim?

Aşağıdaki kodu kullanıyorum, ancak her zaman kimliği ne olursa olsun işaretli onay kutularının sayısını döndürür.

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

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

Kimlikler belgenizde benzersiz olmalıdır, yani bunu yapmamalısınız :

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

Bunun yerine, kimliği bırakın ve ardından ada veya içeren bir öğeye göre seçin:

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

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

Ve şimdi 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")

Onay kutusu işaretliyse bu olur.

Aynı ada sahip bir dizi onay kutusu için, işaretli olanların listesini şu şekilde alabilirsiniz:

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

Ardından, bunları gözden geçirmek ve nelerin kontrol edildiğini görmek için şunları yapabilirsiniz:

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

Kaç tanesinin kontrol edildiğini bulmak için şunları yapabilirsiniz:

$boxes.length;

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

Yukarıdaki kod, onay kutusu işaretliyse true değerini, değilse false değerini döndürür.

Aşağıdaki tüm yöntemler kullanışlıdır:

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

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

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

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

Olay dinleyicisi olarak DOMELement veya satır içi "this.checked" önlenmelidir, bunun yerine jQuery on method kullanılmalıdır.

Onay kutusunun işaretli olup olmadığını kontrol etmek için jQuery kodu:

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

Alternatif:

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

İşaretli özellik hakkında hatırlanması gereken en önemli kavram, işaretli özelliğe karşılık gelmemesidir. Öznitelik aslında defaultChecked özelliğine karşılık gelir ve yalnızca onay kutusunun başlangıç ​​değerini ayarlamak için kullanılmalıdır. İşaretli özellik değeri, işaretli özellik değişirken onay kutusunun durumu ile değişmez. Bu nedenle, bir onay kutusunun işaretli olup olmadığını belirlemenin çapraz tarayıcı uyumlu yolu özelliği kullanmaktır

Aşağıdaki yöntemlerin tümü mümkündür

elem.checked 

$(elem).prop("checked") 

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

Bu kodu kullanabilirsiniz,

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

JQuery belgelerine göre, bir onay kutusunun işaretli olup olmadığını kontrol etmenin aşağıdaki yolları vardır. Örneğin bir onay kutusunu ele alalım ( Tüm örneklerle jsfiddle'ı kontrol edin )

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

Örnek 1 - İşaretli olarak

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

Örnek 2 - jQuery ile, NOT -: işaretli

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

Örnek 3 - jQuery prop ile

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

Check Çalışma jsfiddle

Bunu deneyebilirsiniz:

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

Aşağıdaki önerilen kodlardan herhangi birini jquery ile kullanabilirsiniz.

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

OP jquery istiyorum biliyorum ama benim durumumda saf JS benim gibi biri burada ve jquery yoksa ya da kullanmak istemiyorsanız cevap oldu - İşte JS cevap:

document.getElementById("myCheck").checked

MyCheck kimliğine sahip giriş işaretlenirse true, işaretlenmezse false değerini döndürür.

Bu kadar basit.

Bunu basitçe şöyle yapabilirsiniz;

Çalışma keman

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

hatta daha basit;

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

Eğer checkboxis işaretli onu dönecektir trueaksiundefined

Bu aynı zamanda sık kullandığım bir fikir:

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

Çekilirse 1 döndürür; aksi takdirde 0 değerini döndürür.

Bir onay kutusunu işaretlemek ve ayarlamak için basit Demo.

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

Sadece örneğimde durum, iletişim kutusunu kapatmadan önce onay kutusunu doğrulayan bir iletişim kutusuydu. Yukarıdakilerin hiçbiri ve jQuery'de bir onay kutusunun işaretli olup olmadığını nasıl kontrol edebilirim? ve jQuery onay kutusu işaretliyse de işe yaramadı.

Sonunda

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

Bu, sınıfı sonra ID'yi çağırmak için çalıştı. sadece kimliği değil. Bunun nedeni, bu sayfadaki yuvalanmış DOM öğelerinin soruna neden olması olabilir. Geçici çözüm yukarıdaydı.

Kimliğine sahip onay kutusu için

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

basitçe yapabilirsin

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

Eğer alacak trueveya falseyukarıdaki sözdizimi için dönüş değeri olarak. Eğer normal boolean ifadesi olarak if deyiminde kullanabilirsiniz.

Böyle bir şey yardımcı olabilir

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

Aslında, jsperf.com göre , DOM işlemleri en hızlı, sonra $ (). Prop () ardından $ (). ((!!)

İşte sözdizimleri:

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!!');

Şahsen tercih ederim .prop(). Bunun aksine .is(), değeri ayarlamak için de kullanılabilir.

Geçiş onay kutusu işaretli

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

Bu kodu kullanarak, farklı onay kutusu gruplarında veya birden çok onay kutusundan en az bir onay kutusunun seçili olup olmadığını kontrol edebilirsiniz. Bunu kullanarak kimlikleri veya dinamik kimlikleri kaldırmanız gerekemez. Bu kod aynı kimliklerle çalışır.

Referans Bağlantısı

<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 ortasından beri ve jQuery bazen VueJS, React vb.

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

Sorunuz net değil: girişte "onay kutusu dizi kimliği" vermek ve true/falseçıkışa erişmek istiyorsunuz - bu şekilde hangi onay kutusunun işaretlendiğini bilemezsiniz (işlev adınızın önerdiği gibi). Aşağıda isCheckedById, giriş alma onay kutusu idve çıkış dönüşü konusunda beden önerim var true/false(çok basit ama kimliğiniz anahtar kelime olmamalı),

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>

aşağıdaki kodu kullan

<script>

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

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