De waarde van het aangevinkte selectievakje ophalen?

Dus ik heb een code die er als volgt uitziet:

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

Ik heb alleen Javascript nodig om de waarde te krijgen van het selectievakje dat momenteel is aangevinkt.

BEWERKEN: om toe te voegen, is er slechts EEN aangevinkt vakje.


Antwoord 1, autoriteit 100%

Voor moderne browsers:

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

Door jQueryte gebruiken:

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

Puur javascript zonder jQuery:

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

Antwoord 2, autoriteit 95%

Geen van bovenstaande werkte voor mij, maar gebruik gewoon dit:

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

Veel plezier met coderen.


Antwoord 3, autoriteit 42%

Ik gebruik dit in mijn code.Probeer dit

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

Als het selectievakje is aangevinkt, is xwaar, anders is het onwaar.


Antwoord 4, autoriteit 6%

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

Antwoord 5, autoriteit 2%

$(document).ready(function() {
  var ckbox = $("input[name='ips']");
  var chkId = '';
  $('input').on('click', function() {
    if (ckbox.is(':checked')) {
      $("input[name='ips']:checked").each ( function() {
   			chkId = $(this).val() + ",";
        chkId = chkId.slice(0, -1);
 	  });
       alert ( $(this).val() ); // return all values of checkboxes checked
       alert(chkId); // return value of checkbox checked
    }     
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" name="ips" value="12520">
<input type="checkbox" name="ips" value="12521">
<input type="checkbox" name="ips" value="12522">

Antwoord 6, autoriteit 2%

Dit is geen direct antwoord op de vraag, maar kan toekomstige bezoekers helpen.


Als je wilt dat een variabele altijd de huidige status van het selectievakje is (in plaats van de status te moeten blijven controleren), kun je de gebeurtenis onChangewijzigen om die variabele in te stellen.

Dit kan in de HTML:

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

of met JavaScript:

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

Antwoord 7

Gebruik dit:

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

Dit veronderstelt dat de selectievakjes om te controleren de klasse “messageCheckbox” hebben, anders zou u moeten controleren of de invoer van het type selectievakje is, enz.


Antwoord 8

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

Antwoord 9

Geen van bovenstaande werkte voor mij zonder fouten in de console te veroorzaken wanneer het vakje niet was aangevinkt, dus ik deed in plaats daarvan iets in de trant van (onclick en de checkbox-functie worden alleen gebruikt voor demo-doeleinden, in mijn gebruik is het onderdeel van een veel grotere functie voor het indienen van formulieren):

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>

Antwoord 10

Als u Semantic UI Reactgebruikt, worden datadoorgegeven als de tweede parameter voor de gebeurtenis onChange.

U kunt daarom als volgt toegang krijgen tot de eigenschap checked:

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

Antwoord 11

Als je de waarden van alle selectievakjes wilt krijgen met jQuery, kan dit je misschien helpen. Hiermee wordt de lijst geparseerd en kunt u, afhankelijk van het gewenste resultaat, andere code uitvoeren. Trouwens, hiervoor hoeft men de invoer niet tussen haakjes [] te noemen. Ik heb ze weggelaten.

 $(document).on("change", ".messageCheckbox", function(evnt){
    var data = $(".messageCheckbox");
    data.each(function(){
      console.log(this.defaultValue, this.checked);
      // Do something... 
    });
  }); /* END LISTENER messageCheckbox */

Antwoord 12

In mijn project gebruik ik meestal deze fragmenten:

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

En het werkt goed.

Other episodes