Uzyskaj wartość zaznaczonego pola wyboru?

Mam więc kod, który wygląda następująco:

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

Po prostu potrzebuję JavaScript, aby uzyskać wartość dowolnego pola wyboru, które jest obecnie zaznaczone.

EDYCJA : Aby dodać, będzie tylko JEDNO zaznaczone pole.

W przypadku nowoczesnych przeglądarek :

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

UżywającjQuery :

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

Czysty javascript bezjQuery :

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

Żadne z powyższych nie działało dla mnie, ale po prostu użyj tego:

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

Miłego kodowania.

Używam tego w moim kodzie. Spróbuj tego

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

Jeśli pole wyboru jest zaznaczone, xbędzie prawdziwe, w przeciwnym razie będzie fałszywe.

w zwykłym javascript:

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

To nie jest bezpośrednią odpowiedzią na pytanie, ale może pomóc przyszłym odwiedzającym.

Jeśli chcesz, aby zmienna zawsze była bieżącym stanem pola wyboru (zamiast ciągłego sprawdzania jego stanu), możesz zmodyfikować onchangezdarzenie, aby ustawić tę zmienną.

Można to zrobić w HTML:

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

lub z JavaScript:

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

Użyj tego:

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

Zakłada się, że pola wyboru mają klasę „messageCheckbox”, w przeciwnym razie musiałbyś sprawdzić, czy wejście jest typu pola wyboru itp.

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

Jeśli używasz Semantic UI React , datajest przekazywany jako drugi parametr onChangezdarzenia.

Dlatego możesz uzyskać dostęp do checkednieruchomości w następujący sposób:

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

Żadne z powyższych nie działało dla mnie bez zgłaszania błędów w konsoli, gdy pole nie było zaznaczone, więc zamiast tego zrobiłem coś w ten sposób (onclick i funkcja pola wyboru są używane tylko do celów demonstracyjnych, w moim przypadku jest to część znacznie większa funkcja przesyłania formularzy):

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>

W moim projekcie zwykle używam tych fragmentów:

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

I działa dobrze. Pozdrowienia.