Hoe kan ik de waarde van een selectievakje in jQuery krijgen?
Antwoord 1, autoriteit 100%
Om de waarde van het Value attribuut te krijgen, kun je zoiets als dit doen:
$("input[type='checkbox']").val();
Of als je er een classof idvoor hebt ingesteld, kun je:
$('#check_id').val();
$('.check_class').val();
Dit geeft echter de dezelfdewaarde, of het nu is aangevinkt of niet, dit kan verwarrend zijn omdat het anders is dan het gedrag van het ingediende formulier.
Als u wilt controleren of het is aangevinkt of niet, doet u het volgende:
if ($('#check_id').is(":checked"))
{
// it is checked
}
Antwoord 2, autoriteit 21%
Die 2 manieren werken:
$('#checkbox').prop('checked')$('#checkbox').is(':checked')(bedankt @mgsloan)
$('#test').click(function() {
alert("Checkbox state (method 1) = " + $('#test').prop('checked'));
alert("Checkbox state (method 2) = " + $('#test').is(':checked'));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Check me: <input id="test" type="checkbox" />Antwoord 3, autoriteit 5%
Probeer deze kleine oplossing:
$("#some_id").attr("checked") ? 1 : 0;
of
$("#some_id").attr("checked") || 0;
Antwoord 4, autoriteit 3%
De beste manier om de waarde van een selectievakje op te halen is als volgt
if ( elem.checked )
if ( $( elem ).prop( "checked" ) )
if ( $( elem ).is( ":checked" ) )
zoals uitgelegd in de officiële documentatie op de website van jQuery. De rest van de methoden heeft niets te maken met de eigenschapvan het selectievakje, ze controleren het attribuut, wat betekent dat ze de beginstatus van het selectievakje testen toen het werd geladen. Dus in het kort:
- Als je het element hebt en je weet dat het een selectievakje is, kun je gewoon de eigenschap ervan lezen en heb je daar geen jQuery voor nodig (dwz
elem.checked) of je kunt$(elem).prop("checked")als u op jQuery wilt vertrouwen. - Als u de waarde wilt weten (of vergelijken) toen het element voor het eerst werd geladen (dwz de standaardwaarde), is de juiste manier om dit te doen
elem.getAttribute("checked")ofelem.prop("defaultChecked").
Houd er rekening mee dat elem.attr("checked")pas na versie 1.6.1+ van jQuery wordt gewijzigd om hetzelfde resultaat te geven als elem.prop("checked").
Sommige antwoorden zijn misleidend of onnauwkeurig, controleer hieronder zelf:
Antwoord 5, autoriteit 2%
Gewoon om dingen te verduidelijken:
$('#checkbox_ID').is(":checked")
Zal ‘true’ of ‘false’ retourneren
6, Autoriteit 2%
$('#checkbox_id').val();
$('#checkbox_id').is(":checked");
$('#checkbox_id:checked').val();
7
//By each()
var testval = [];
$('.hobbies_class:checked').each(function() {
testval.push($(this).val());
});
//by map()
var testval = $('input:checkbox:checked.hobbies_class').map(function(){
return this.value; }).get().join(",");
//HTML Code
<input type="checkbox" value="cricket" name="hobbies[]" class="hobbies_class">Cricket
<input type="checkbox" value="hockey" name="hobbies[]" class="hobbies_class">Hockey
Voorbeeld
Demo
8
jQuery(".checkboxClass").click(function(){
var selectedCountry = new Array();
var n = jQuery(".checkboxClass:checked").length;
if (n > 0){
jQuery(".checkboxClass:checked").each(function(){
selectedCountry.push($(this).val());
});
}
alert(selectedCountry);
});
9
Ondanks het feit dat deze vraag om een jQuery-oplossing vraagt, is hier een puur javascript-antwoord omdat niemand het heeft genoemd.
zonder jQuery:
Selecteer eenvoudig het element en open de checkedeigenschap(die een boolean retourneert).
var checkbox = document.querySelector('input[type="checkbox"]');
alert(checkbox.checked);<input type="checkbox"/>Antwoord 10
Hier leest u hoe u de waarde van alle aangevinkte selectievakjesals een array krijgt:
var values = (function() {
var a = [];
$(".checkboxes:checked").each(function() {
a.push(this.value);
});
return a;
})()
Antwoord 11
om de waarde van de aangevinkte checkboxex in jqueryte krijgen:
var checks = $("input[type='checkbox']:checked"); // returns object of checkeds.
for(var i=0; i<checks.length; i++){
console.log($(checks[i]).val()); // or do what you want
});
in pure js:
var checks = document.querySelectorAll("input[type='checkbox']:checked");
for(var i=0; i<checks.length; i++){
console.log(checks[i].value); // or do what you want
});
Antwoord 12
Gebruik de volgende code:
$('input[name^=CheckBoxInput]').val();
Antwoord 13
$('.class[value=3]').prop('checked', true);
Antwoord 14
De beste manier is $('input[name="line"]:checked').val()
En je kunt ook geselecteerde tekst krijgen $('input[name="line"]:checked').text()
Voeg waardekenmerk en naam toe aan uw keuzerondjes. Zorg ervoor dat alle invoer hetzelfde naamkenmerk heeft.
<div class="col-8 m-radio-inline">
<label class="m-radio m-radio-filter">
<input type="radio" name="line" value="1" checked> Value Text 1
</label>
<label class="m-radio m-radio-filter">
<input type="radio" name="line" value="2"> Value Text 2
</label>
<label class="m-radio m-radio-filter">
<input type="radio" name="line" value="3"> Value Text 3
</label>
</div>
Antwoord 15
$("input[name='gender']:checked").val();
dit werkte in mijn geval, iedereen die op zoek is naar een eenvoudige manier, moet deze syntaxis proberen.
Bedankt
Antwoord 16
<script type="text/javascript">
$(document).ready(function(){
$('.laravel').click(function(){
var val = $(this).is(":checked");
$('#category').submit();
});
});
<form action="{{route('directory')}}" method="post" id="category">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input name="category" value="{{$name->id}}" class="laravel" type="checkbox">{{$name->name}}
</form>
Antwoord 17
Let op, vanaf vandaag, 2018, omdat api in de loop der jaren is veranderd.
removeAttr zijn afgeprijsd, werken NIET meer!
Jquery Vink een selectievakje aan of verwijder het vinkje:
Slecht, werkt niet meer.
$('#add_user_certificate_checkbox').removeAttr("checked");
$('#add_user_certificate_checkbox').attr("checked","checked");
In plaats daarvan zou je het volgende moeten doen:
$('#add_user_certificate_checkbox').prop('checked', true);
$('#add_user_certificate_checkbox').prop('checked', false);