verifier - vérifier si bouton radio coché javascript




Comment savoir quel bouton radio est sélectionné via jQuery? (20)

À partir de cette question , j'ai trouvé un moyen alternatif d'accéder à l' input actuellement sélectionnée lorsque vous êtes dans un événement click pour son étiquette respective. La raison en est que l' input nouvellement sélectionnée n'est mise à jour qu'après l'événement de clic de son 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>

J'ai deux boutons radio et je veux poster la valeur de celui sélectionné. Comment puis-je obtenir la valeur avec jQuery?

Je peux les avoir tous comme ça:

$("form :radio")

Comment savoir lequel est sélectionné?


Ce que je devais faire, c’était 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.


Cela fonctionne bien

$('input[type="radio"][class="className"]:checked').val()

Démo de travail

Le sélecteur :checked selected fonctionne pour les checkboxes à checkboxes , radio buttons et les éléments de sélection. Pour les éléments sélectionnés uniquement, utilisez le sélecteur :selected .

API pour :checked Selector


Dans mon cas, j'ai deux boutons radio dans un formulaire et je voulais connaître le statut de chaque bouton. Ce ci-dessous a fonctionné pour moi:

// 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>


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.

Fiddle


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"
}

Obtenez toutes les radios:

var radios = jQuery("input[type='radio']");

Filtre pour obtenir celui qui est coché

radios.filter(":checked")

Pour obtenir la valeur de l'élément radioName sélectionné d'un formulaire portant 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>


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();

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() , not find() . ( find() sert à 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 recommandant 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();

Si vous avez seulement 1 ensemble de boutons radio sur 1 formulaire, le code jQuery est aussi simple que cela:

$( "input: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")

Une autre option est:

$('input[name=radioName]:checked').val()

Utilisez ceci..

$("#myform input[type='radio']:checked").val();

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();
}

Voici comment écrire le formulaire et gérer l’obtention de la radio vérifié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 ...


Vous pouvez utiliser le sélecteur: vérifié avec le sélecteur de radio.

 $("form:radio:checked").val();

essayez-le

var radioVal = $("#myform").find("input[type='radio']:checked").val();

console.log(radioVal);

 $(".Stat").click(function () {
     var rdbVal1 = $("input[name$=S]:checked").val();
 }

$("input:radio:checked").val();




radio-button