Comment savoir quel bouton radio est sélectionné via jQuery?
J'ai deux boutons radio et je veux publier la valeur de celle sélectionnée . Comment puis-je obtenir la valeur avec jQuery?
Je peux les avoir tous comme ça:
$("form :radio")
Comment savoir lequel est sélectionné?
Pour obtenir la valeur de l'élément sélectionné radioName d'un formulaire avec l'ID myForm:
$('input[name=radioName]:checked', '#myForm').val()
Voici un exemple:
$('#myForm input').on('change', function() {
alert($('input[name=radioName]:checked', '#myForm').val());
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
<input type="radio" name="radioName" value="1" /> 1 <br />
<input type="radio" name="radioName" value="2" /> 2 <br />
<input type="radio" name="radioName" value="3" /> 3 <br />
</form>Utilisez ceci..
$("#myform input[type='radio']:checked").val();
Si vous avez déjà une référence à un groupe de boutons radio, par exemple:
var myRadio = $("input[name=myRadio]");
Utilisez la fonction filter() et non find(). (find() permet de localiser les éléments enfant/descendant, alors que filter() recherche les éléments de niveau supérieur de votre sélection.)
var checkedValue = myRadio.filter(":checked").val();
Notes: Cette réponse corrigeait à l'origine une autre réponse qui recommandait d'utiliser find(), qui semble avoir été modifiée depuis. find() peut toujours être utile dans le cas où vous aviez déjà une référence à un élément conteneur, mais pas aux boutons radio, par exemple:
var form = $("#mainForm");
...
var checkedValue = form.find("input[name=myRadio]:checked").val();
Cela devrait fonctionner:
$("input[name='radioName']:checked").val()
Notez le "" utilisé autour de l'entrée: coché et non "comme la solution de Peter J
Vous pouvez utiliser le sélecteur: vérifié avec le sélecteur de radio.
$("form:radio:checked").val();
Si vous voulez juste la valeur booléenne, c’est-à-dire si elle est cochée ou non, essayez ceci:
$("#Myradio").is(":checked")
Obtenez toutes les radios:
var radios = jQuery("input[type='radio']");
Filtre pour obtenir celui qui est coché
radios.filter(":checked")
Une autre option est:
$('input[name=radioName]:checked').val()
$("input:radio:checked").val();
Voici comment écrire le formulaire et gérer l’obtention de la radio contrôlée.
En utilisant un formulaire appelé myForm:
<form id='myForm'>
<input type='radio' name='radio1' class='radio1' value='val1' />
<input type='radio' name='radio1' class='radio1' value='val2' />
...
</form>
Obtenez la valeur du formulaire:
$('#myForm .radio1:checked').val();
Si vous ne postez pas le formulaire, je le simplifierais davantage en utilisant:
<input type='radio' class='radio1' value='val1' />
<input type='radio' class='radio1' value='val2' />
Obtenir la valeur vérifiée devient alors:
$('.radio1:checked').val();
Avoir un nom de classe sur l'entrée me permet de styler facilement les entrées ...
Dans mon cas, j'ai deux boutons radio dans un formulaire et je voulais connaître le statut de chaque bouton ...
// get radio buttons value
console.log( "radio1: " + $('input[id=radio1]:checked', '#toggle-form').val() );
console.log( "radio2: " + $('input[id=radio2]:checked', '#toggle-form').val() );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="toggle-form">
<div id="radio">
<input type="radio" id="radio1" name="radio" checked="checked" /><label for="radio1">Plot single</label>
<input type="radio" id="radio2" name="radio"/><label for="radio2">Plot all</label>
</div>
</form>Dans un bouton radioJSFgénéré (à l’aide de la balise <h:selectOneRadio>), vous pouvez procéder comme suit:
radiobuttonvalue = jQuery("input[name='form_id\:radiobutton_id']:checked").val();
où selectOneRadio ID est radiobutton_id et ID de formulaire est form_id .
Veillez à utiliser name à la place id , comme indiqué, car jQuery utilise cet attribut ( name est généré automatiquement par JSF, qui ressemble à un ID de contrôle).
J'ai écrit un plugin jQuery pour définir et obtenir les valeurs des boutons radio. Il respecte également le "changement" événement sur eux.
(function ($) {
function changeRadioButton(element, value) {
var name = $(element).attr("name");
$("[type=radio][name=" + name + "]:checked").removeAttr("checked");
$("[type=radio][name=" + name + "][value=" + value + "]").attr("checked", "checked");
$("[type=radio][name=" + name + "]:checked").change();
}
function getRadioButton(element) {
var name = $(element).attr("name");
return $("[type=radio][name=" + name + "]:checked").attr("value");
}
var originalVal = $.fn.val;
$.fn.val = function(value) {
//is it a radio button? treat it differently.
if($(this).is("[type=radio]")) {
if (typeof value != 'undefined') {
//setter
changeRadioButton(this, value);
return $(this);
} else {
//getter
return getRadioButton(this);
}
} else {
//it wasn't a radio button - let's call the default val function.
if (typeof value != 'undefined') {
return originalVal.call(this, value);
} else {
return originalVal.call(this);
}
}
};
})(jQuery);
Mettez le code n'importe où pour activer le complément. Alors profitez-en! Il remplace simplement la fonction val par défaut sans rien casser.
Vous pouvez visiter ce jsFiddle pour l’essayer en action et voir comment cela fonctionne.
Vérifiez également si l'utilisateur ne sélectionne rien.
var radioanswer = 'none';
if ($('input[name=myRadio]:checked').val() != null) {
radioanswer = $('input[name=myRadio]:checked').val();
}
Si vous avez plusieurs boutons radio sous forme unique, puis
var myRadio1 = $('input[name=radioButtonName1]');
var value1 = myRadio1.filter(':checked').val();
var myRadio2 = $('input[name=radioButtonName2]');
var value2 = myRadio2.filter(':checked').val();
Cela fonctionne pour moi.
Cela fonctionne bien
$('input[type="radio"][class="className"]:checked').val()
Le sélecteur :checked fonctionne pour les éléments checkboxes, radio buttons et select. Pour les éléments sélectionnés uniquement, utilisez le sélecteur :selected.
$(".Stat").click(function () {
var rdbVal1 = $("input[name$=S]:checked").val();
}
Pour obtenir la valeur de la radio sélectionnée qui utilise une classe:
$('.class:checked').val()
Utilisez ceci:
value = $('input[name=button-name]:checked').val();
J'utilise ce script simple
$('input[name="myRadio"]').on('change', function() {
var radioValue = $('input[name="myRadio"]:checked').val();
alert(radioValue);
});
DEMO: https://jsfiddle.net/ipsjolly/xygr065w/
$(function(){
$("#submit").click(function(){
alert($('input:radio:checked').val());
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Sales Promotion</td>
<td><input type="radio" name="q12_3" value="1">1</td>
<td><input type="radio" name="q12_3" value="2">2</td>
<td><input type="radio" name="q12_3" value="3">3</td>
<td><input type="radio" name="q12_3" value="4">4</td>
<td><input type="radio" name="q12_3" value="5">5</td>
</tr>
</table>
<button id="submit">submit</button>Si vous avez seulement 1 ensemble de boutons radio sur 1 formulaire, le code jQuery est aussi simple que cela:
$( "input:checked" ).val()
J'ai publié une bibliothèque pour aider avec cela. Extrait toutes les valeurs d'entrée possibles, en fait, mais inclut également le bouton radio qui a été coché. Vous pouvez le vérifier à https://github.com/mazondo/formalizedata
Cela vous donnera un objet js des réponses, donc un formulaire comme:
<form>
<input type="radio" name"favorite-color" value="blue" checked> Blue
<input type="radio" name="favorite-color" value="red"> Red
</form>
te donnera:
$("form").formalizeData()
{
"favorite-color" : "blue"
}
Pour récupérer toutes les valeurs de boutons radio dans un tableau JavaScript, utilisez le code jQuery suivant:
var values = jQuery('input:checkbox:checked.group1').map(function () {
return this.value;
}).get();
essayez-le
var radioVal = $("#myform").find("input[type='radio']:checked").val();
console.log(radioVal);
Une autre façon de l'obtenir:
$("#myForm input[type=radio]").on("change",function(){
if(this.checked) {
alert(this.value);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
<span><input type="radio" name="q12_3" value="1">1</span><br>
<span><input type="radio" name="q12_3" value="2">2</span>
</form>JQuery pour obtenir tous les boutons radio du formulaire et la valeur cochée.
$.each($("input[type='radio']").filter(":checked"), function () {
console.log("Name:" + this.name);
console.log("Value:" + $(this).val());
});
Ce que je devais faire était de simplifier le code C #, c’est-à-dire faire le plus possible dans le JavaScript frontal. J'utilise un conteneur fieldset parce que je travaille dans DNN et qu'il a son propre formulaire. Je ne peux donc pas ajouter de formulaire.
Je dois tester quelle zone de texte sur 3 est utilisée et si c'est le cas, quel est le type de recherche? Commence par la valeur, Contient la valeur, Correspondance exacte de la valeur.
HTML:
<fieldset id="fsPartNum" class="form-inline">
<div class="form-group">
<label for="txtPartNumber">Part Number:</label>
<input type="text" id="txtPartNumber" class="input-margin-pn" />
</div>
<div class="form-group">
<label for="radPNStartsWith">Starts With: </label>
<input type="radio" id="radPNStartsWith" name="partNumber" checked value="StartsWith"/>
</div>
<div class="form-group">
<label for="radPNContains">Contains: </label>
<input type="radio" id="radPNContains" name="partNumber" value="Contains" />
</div>
<div class="form-group">
<label for="radPNExactMatch">Exact Match: </label>
<input type="radio" id="radPNExactMatch" name="partNumber" value="ExactMatch" />
</div>
Et mon JavaScript est:
alert($('input[name=partNumber]:checked', '#fsPartNum').val());
if(txtPartNumber.val() !== ''){
message = 'Customer Part Number';
}
else if(txtCommercialPartNumber.val() !== ''){
}
else if(txtDescription.val() !== ''){
}
Il suffit de dire que toute balise contenant un identifiant peut être utilisée. Pour les DNNers, c'est bon à savoir. L'objectif final ici est de transmettre au code de niveau intermédiaire ce qui est nécessaire pour lancer une recherche de pièces dans SQL Server.
De cette façon, je n'ai pas à copier également le code C # beaucoup plus compliqué précédent. Le gros travail se fait ici même.
Je devais chercher un peu pour cela et ensuite bricoler pour le faire fonctionner. Donc, pour les autres DNNs, j'espère que c'est facile à trouver.
De cette question , j'ai trouvé un autre moyen d’accéder à la input actuellement sélectionnée lorsque vous vous trouvez dans un événement click pour son étiquette respective. La raison en est que la input nouvellement sélectionnée n'est mise à jour qu'après l'événement de clic de sa label.
TL; DR
$('label').click(function() {
var selected = $('#' + $(this).attr('for')).val();
...
});
$(function() {
// this outright does not work properly as explained above
$('#reported label').click(function() {
var query = $('input[name="filter"]:checked').val();
var time = (new Date()).toString();
$('.query[data-method="click event"]').html(query + ' at ' + time);
});
// this works, but fails to update when same label is clicked consecutively
$('#reported input[name="filter"]').on('change', function() {
var query = $('input[name="filter"]:checked').val();
var time = (new Date()).toString();
$('.query[data-method="change event"]').html(query + ' at ' + time);
});
// here is the solution I came up with
$('#reported label').click(function() {
var query = $('#' + $(this).attr('for')).val();
var time = (new Date()).toString();
$('.query[data-method="click event with this"]').html(query + ' at ' + time);
});
});input[name="filter"] {
display: none;
}
#reported label {
background-color: #ccc;
padding: 5px;
margin: 5px;
border-radius: 5px;
cursor: pointer;
}
.query {
padding: 5px;
margin: 5px;
}
.query:before {
content: "on " attr(data-method)": ";
}
[data-method="click event"] {
color: red;
}
[data-method="change event"] {
color: #cc0;
}
[data-method="click event with this"] {
color: green;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="reported">
<input type="radio" name="filter" id="question" value="questions" checked="checked">
<label for="question">Questions</label>
<input type="radio" name="filter" id="answer" value="answers">
<label for="answer">Answers</label>
<input type="radio" name="filter" id="comment" value="comments">
<label for="comment">Comments</label>
<input type="radio" name="filter" id="user" value="users">
<label for="user">Users</label>
<input type="radio" name="filter" id="company" value="companies">
<label for="company">Companies</label>
<div class="query" data-method="click event"></div>
<div class="query" data-method="change event"></div>
<div class="query" data-method="click event with this"></div>
</form>$(function () {
// Someone has clicked one of the radio buttons
var myform= 'form.myform';
$(myform).click(function () {
var radValue= "";
$(this).find('input[type=radio]:checked').each(function () {
radValue= $(this).val();
});
})
});
** S'il vous plaît essayer ci-dessous exemple pour vérifier quel bouton radio est sélectionné **
<script>
$('#form1 input').on('change', function() {
alert($('input[name=age]:checked', '#form1 ').val());
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
<form id="form1">
<input type="radio" name="age" value="18" /> 18 <br />
<input type="radio" name="age" value="20" /> 20 <br />
<input type="radio" name="age" value="22" /> 22 <br />
</form>
Que dis-tu de ça?
Utiliser change et récupère la valeur du type radio est cochée ...
$('#my-radio-form').on('change', function() {
console.log($('[type="radio"]:checked').val());
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<form id="my-radio-form">
<input type="radio" name="input-radio" value="a" />a
<input type="radio" name="input-radio" value="b" />b
<input type="radio" name="input-radio" value="c" />c
<input type="radio" name="input-radio" value="d" />d
</form>Vous devez avoir accès avec le sélecteur :checked:
Vérifiez ce doc:
un exemple:
$('input[name=radioName]:checked', '#myForm').val()
$('#myForm input').on('change', function() {
$('#val').text($('input[name=radioName]:checked', '#myForm').val());
});#val {
color: #EB0054;
font-size: 1.5em;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Radio value: <span id='val'><span></h3>
<form id="myForm">
<input type="radio" name="radioName" value="a"> a <br>
<input type="radio" name="radioName" value="b"> b <br>
<input type="radio" name="radioName" value="c"> c <br>
</form>