Dapatkan nilai kotak centang yang dicentang?

Jadi saya punya kode yang terlihat seperti ini:

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

Saya hanya perlu Javascript untuk mendapatkan nilai dari kotak centang apa pun yang saat ini diperiksa.

EDIT : Untuk menambahkan, hanya akan ada SATU kotak centang.

Untuk browser modern :

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

Dengan menggunakanjQuery :

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

Javascript murni tanpajQuery :

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

Tidak satu pun di atas bekerja untuk saya tetapi cukup gunakan ini:

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

Selamat coding.

Saya menggunakan ini dalam kode saya. Coba ini

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

Jika kotak centang dicentang xakan benar jika tidak maka akan salah.

dalam javascript biasa:

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

Ini tidak langsung menjawab pertanyaan, tetapi dapat membantu pengunjung masa depan.

Jika Anda ingin agar variabel selalu menjadi kondisi saat ini dari kotak centang (daripada harus terus memeriksa keadaannya), Anda dapat memodifikasi onchangeacara untuk mengatur variabel itu.

Ini dapat dilakukan dalam HTML:

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

atau dengan JavaScript:

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

Gunakan ini:

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

Ini mengasumsikan kotak centang untuk memeriksa memiliki kelas "messageCheckbox", jika tidak, Anda harus melakukan pemeriksaan jika inputnya adalah jenis kotak centang, dll.

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

Jika Anda menggunakan Semantic UI React , dataditeruskan sebagai parameter kedua ke onChangeacara tersebut.

Karena itu Anda dapat mengakses checkedproperti sebagai berikut:

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

Tidak satu pun di atas bekerja untuk saya tanpa melemparkan kesalahan di konsol ketika kotak tidak dicentang jadi saya melakukan sesuatu di sepanjang baris ini sebagai gantinya (hanya klik dan fungsi kotak centang hanya digunakan untuk tujuan demo, dalam kasus penggunaan saya itu adalah bagian dari fungsi pengiriman formulir jauh lebih besar):

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>

Dalam proyek saya, saya biasanya menggunakan cuplikan ini:

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

Dan itu bekerja dengan baik. Salam.