İşaretli onay kutusunun değerini al?

Yani şöyle bir kod var:

<input class="messageCheckbox" type="checkbox" value="3" name="mailId[]">
<input class="messageCheckbox" type="checkbox" value="1" name="mailId[]">

Sadece şu anda işaretli olan onay kutusunun değerini almak için Javascript gerekir.

DÜZENLEME : Eklemek için yalnızca BİR onay kutusu olacaktır.

Modern tarayıcılar için :

var checkedValue = document.querySelector('.messageCheckbox:checked').value;

Şunları kullanarakjQuery :

var checkedValue = $('.messageCheckbox:checked').val();

Saf javascript olmadanjQuery :

var checkedValue = null; 
var inputElements = document.getElementsByClassName('messageCheckbox');
for(var i=0; inputElements[i]; ++i){
      if(inputElements[i].checked){
           checkedValue = inputElements[i].value;
           break;
      }
}

Yukarıdakilerin hiçbiri benim için işe yaramadı, ancak bunu kullanın:

document.querySelector('.messageCheckbox').checked;

Mutlu kodlama.

Bunu kodumda kullanıyorum.

var x=$("#checkbox").is(":checked");

Onay kutusu işaretliyse xdoğru olur, aksi takdirde yanlış olur.

düz javascript ile:

function test() {
    var cboxes = document.getElementsByName('mailId[]');
    var len = cboxes.length;
    for (var i=0; i<len; i++) {
        alert(i + (cboxes[i].checked?' checked ':' unchecked ') + cboxes[i].value);
    }
}

function selectOnlyOne(current_clicked) {
    var cboxes = document.getElementsByName('mailId[]');
    var len = cboxes.length;
    for (var i=0; i<len; i++) {
        cboxes[i].checked = (cboxes[i] == current);
    }
}

Bu soruya doğrudan cevap vermez, ancak gelecekteki ziyaretçilere yardımcı olabilir.

Bir değişkenin her zaman onay kutusunun geçerli durumu olmasını istiyorsanız (durumunu kontrol etmeye devam etmek yerine), onchangeo değişkeni ayarlamak için olayı değiştirebilirsiniz .

Bu HTML'de yapılabilir:

<input class='messageCheckbox' type='checkbox' onchange='some_var=this.checked;'>

veya JavaScript ile:

cb = document.getElementsByClassName('messageCheckbox')[0]
cb.addEventListener('change', function(){some_var = this.checked})

Bunu kullan:

alert($(".messageCheckbox").is(":checked").val())

Bu, onay kutularının "messageCheckbox" sınıfına sahip olduğunu kontrol etmek için varsayılır, aksi takdirde girişin onay kutusu türü, vb. Olup olmadığını kontrol etmeniz gerekir.

<input class="messageCheckbox" type="checkbox" onchange="getValue(this.value)" value="3" name="mailId[]">

<input class="messageCheckbox" type="checkbox" onchange="getValue(this.value)" value="1" name="mailId[]">

function getValue(value){
    alert(value);
}

Eğer kullanıyorsanız Semantik UI Tepki , dataikinci parametre olarak geçirilironChange olay.

Bu nedenle tesise checkedaşağıdaki gibi erişebilirsiniz :

<Checkbox label="Conference" onChange={(e, d) => console.log(d.checked)} />

Yukarıdakilerin hiçbiri, kutu işaretlenmediğinde konsolda hata atmadan benim için işe yaramadı, bu yüzden bu satırlar boyunca bir şey yaptım (onclick ve onay kutusu işlevi sadece demo amaçlı kullanılıyor, benim kullanımım durumunda bu bir çok daha büyük form gönderme işlevi):

function checkbox() {
  var checked = false;
  if (document.querySelector('#opt1:checked')) {
     checked = true;
  }
  document.getElementById('msg').innerText = checked;
}

<input type="checkbox" onclick="checkbox()" id="opt1"> <span id="msg">Click The Box</span>

Projemde genellikle bu parçacıkları kullanıyorum:

var type[];
$("input[name='messageCheckbox']:checked").each(function (i) {
                type[i] = $(this).val();
            });

Ve iyi çalışıyor. Saygılarımla.