Oprindeligt postet @ https://codeanddeploy.com besøg og download prøvekoden:https://codeanddeploy.com/blog/jquery/how-to-check-if-radio-button-is-checked-or-selected-in -jquery
I dette indlæg vil vi tale om, hvordan du kontrollerer, om din radioknap allerede er markeret ved hjælp af jquery. Dette gælder normalt, hvis du laver formularer med yderligere kontrol. Dette er nyttigt at bestemme, hvilken alternativknap der er markeret, før du sender den til din serverside. Jeg vil dele 3 metoder, som du kan vælge og anvende, som passer til dine behov.
Metode #1
Tjek ved hjælp af if-sætning med :checked selector og val() for at bestemme, om markeret
// Method #1 - check using if statement with :checked selector and val() to determine if checked
$("#btnSubmit1").on("click", function() {
if($(".status1:checked").val()) {
alert('checked')
} else {
alert('not checked.')
}
});
Metode #2
Tjek ved hjælp af .is()-funktionen og :checked vælgeren for at afgøre, om alternativknappen er markeret
// Method #2 - check using is() function to determine if the radio button is checked
$("#btnSubmit2").on("click", function() {
if($(".status2").is(':checked')) {
alert('checked')
} else {
alert('not checked.')
}
});
Metode #3
Drej radioknapelementerne i en løkke med :markeret vælger. Nyttigt, hvis du har flere valgte alternativknapper
// Method #3 - loop the radio button elements with :checked selector.
// useful if you have multiple selected radio button
$("#btnSubmit3").on("click", function() {
$("[type=\"radio\"]:checked").each(function() {
alert('checked')
});
});
Nu har du ideen om, hvordan du kontrollerer den valgte alternativknap, og vælg bare det, der passer til dig. Nu vil jeg dele hele kildekoden til dette indlæg.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to Check if Radio Button is Checked or Selected in jQuery?</title>
</head>
<body>
<h1>How to Check if Radio Button is Checked or Selected in jQuery?</h1>
<h2>Method #1 - check using if statement with :checked selector and val() to determine if checked</h2>
<form id="form1">
<label>Click here
<input type="radio" value="1" name="status1" class="status1" required="required">
</label>
<br/><br/>
<button type="button" id="btnSubmit1">Check Status</button>
</form>
<br/><br/><br/><br/>
<h2>Method #2 - check using is() function to determine if the radio button is checked</h2>
<form id="form2">
<label>Click here
<input type="radio" value="regular" name="status2" class="status2" required="required">
</label>
<br/><br/>
<button type="button" id="btnSubmit2">Check Status</button>
</form>
<br/><br/><br/><br/>
<h2>Method #3 - loop the radio button elements with :checked selector</h2>
<p>useful if you have multiple selected radio button</p>
<form id="form3">
<label>Click here
<input type="radio" value="regular" name="status3" class="status3" required="required">
</label>
<br/><br/>
<button type="button" id="btnSubmit3">Check Status</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Method #1 - check using if statement with :checked selector and val() to determine if checked
$("#btnSubmit1").on("click", function() {
if($(".status1:checked").val()) {
alert('checked')
} else {
alert('not checked.')
}
});
// Method #2 - check using is() function to determine if the radio button is checked.
$("#btnSubmit2").on("click", function() {
if($(".status2").is(':checked')) {
alert('checked')
} else {
alert('not checked.')
}
});
// Method #3 - loop the radio button elements with :checked selector.
// useful if you have multiple selected radio button.
$("#btnSubmit3").on("click", function() {
$("[type=\"radio\"]:checked").each(function() {
alert('checked')
});
});
});
</script>
</body>
</html>
Jeg håber, at denne tutorial kan hjælpe dig. Besøg venligst her https://codeanddeploy.com/blog/jquery/how-to-check-if-radio-button-is-checked-or-selected-in-jquery, hvis du vil downloade denne kode.
God kodning :)