Publié à l'origine @ https://codeanddeploy.com, visitez et téléchargez l'exemple de code :https://codeanddeploy.com/blog/jquery/how-to-check-if-radio-button-is-checked-or-selected-in -jquery
Dans cet article, nous expliquerons comment vérifier si votre bouton radio est déjà coché à l'aide de jquery. Ceci est généralement applicable si vous faites des formulaires avec une vérification supplémentaire. Ceci est utile pour déterminer quel bouton radio est coché avant de le soumettre à votre serveur. Je vais vous partager 3 méthodes à sélectionner et à appliquer qui conviennent à vos besoins.
Méthode #1
Vérifiez l'utilisation de l'instruction if avec :checked selector et val() pour déterminer si coché
// 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.')
}
});
Méthode #2
Vérifiez en utilisant la fonction .is() et le sélecteur :checked pour déterminer si le bouton radio est coché
// 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.')
}
});
Méthode #3
Bouclez les éléments du bouton radio avec :sélecteur coché. Utile si vous avez plusieurs boutons radio sélectionnés
// 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')
});
});
Vous avez maintenant une idée de la façon de vérifier le bouton radio sélectionné, choisissez simplement ce qui vous convient. Maintenant, je vais partager le code source complet de cet article.
<!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>
J'espère que ce tutoriel pourra vous aider. Veuillez visiter ici https://codeanddeploy.com/blog/jquery/how-to-check-if-radio-button-is-checked-or-selected-in-jquery si vous souhaitez télécharger ce code.
Bon codage :)
