Ursprungligen postat @ https://codeanddeploy.com besök och ladda ner exempelkoden:https://codeanddeploy.com/blog/jquery/how-to-check-if-radio-button-is-checked-or-selected-in -jquery
I det här inlägget kommer vi att prata om hur du kontrollerar om din alternativknapp redan är markerad med jquery. Detta är vanligtvis tillämpligt om du gör formulär med ytterligare kontroll. Detta är användbart att avgöra vilken alternativknapp som är markerad innan du skickar den till din serversida. Jag kommer att dela 3 metoder för dig att välja och tillämpa som passar dina behov.
Metod #1
Kontrollera med if-satsen med :checked selector och val() för att avgöra om markerad
// 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.')
}
});
Metod #2
Kontrollera med .is()-funktionen och :checked väljaren för att avgöra om alternativknappen är markerad
// 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.')
}
});
Metod #3
Slinga alternativknappselementen med :markerad väljare. Användbart om du har flera markerade alternativknappar
// 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 idén om hur du kontrollerar den valda radioknappen, välj bara vad som passar dig. Nu kommer jag att dela hela källkoden för detta inlägg.
<!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>
Jag hoppas att denna handledning kan hjälpa dig. Vänligen besök här https://codeanddeploy.com/blog/jquery/how-to-check-if-radio-button-is-checked-or-selected-in-jquery om du vill ladda ner den här koden.
Lycka till med kodningen :)