Wie kann ich wissen, welches Optionsfeld über jQuery ausgewählt ist?

Ich habe zwei Optionsfelder und möchte den Wert des ausgewählten Optionsfelds veröffentlichen. Wie kann ich den Wert mit jQuery erhalten?

Ich kann sie alle so bekommen:

$("form :radio")

Woher weiß ich, welches ausgewählt ist?

So ermitteln Sie den Wert des ausgewählten radioName Elements eines Formulars mit der ID myForm:

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

Hier ist ein Beispiel:

$('#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>

Benutze das..

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

Wenn Sie bereits einen Verweis auf eine Optionsfeldgruppe haben, zum Beispiel:

var myRadio = $("input[name=myRadio]");

Verwenden Sie die filter()Funktion nicht find(). ( find()dient zum Auffinden von untergeordneten / untergeordneten Elementen, während Elemente der filter()obersten Ebene in Ihrer Auswahl durchsucht werden.)

var checkedValue = myRadio.filter(":checked").val();

Anmerkungen: Diese Antwort korrigierte ursprünglich eine andere Antwort, deren Verwendung empfohlen wurde find()und die seitdem geändert worden zu sein scheint. find()könnte immer noch nützlich sein für die Situation, in der Sie bereits einen Verweis auf ein Containerelement hatten, aber nicht auf die Optionsfelder, z.

var form = $("#mainForm");
...
var checkedValue = form.find("input[name=myRadio]:checked").val();

Das sollte funktionieren:

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

Beachten Sie das "", das um die Eingabe verwendet wird: aktiviert und nicht wie die Lösung von Peter J.

Sie können den markierten Selektor zusammen mit dem Radio-Selektor verwenden.

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

Wenn Sie nur den booleschen Wert möchten, dh ob er aktiviert ist oder nicht, versuchen Sie Folgendes:

$("#Myradio").is(":checked")

Holen Sie sich alle Radios:

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

Filtern Sie, um den zu überprüfen

radios.filter(":checked")

Eine weitere Option ist:

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

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

Hier ist, wie ich das Formular schreiben und mit dem Abrufen des überprüften Radios umgehen würde.

Verwenden eines Formulars namens myForm:

<form id='myForm'>
    <input type='radio' name='radio1' class='radio1' value='val1' />
    <input type='radio' name='radio1' class='radio1' value='val2' />
    ...
</form>

Holen Sie sich den Wert aus dem Formular:

$('#myForm .radio1:checked').val();

Wenn Sie das Formular nicht veröffentlichen, würde ich es weiter vereinfachen, indem ich Folgendes verwende:

<input type='radio' class='radio1' value='val1' />
<input type='radio' class='radio1' value='val2' />

Das Erhalten des überprüften Werts wird dann:

    $('.radio1:checked').val();

Wenn ich einen Klassennamen auf der Eingabe habe, kann ich die Eingaben einfach formatieren ...

In meinem Fall habe ich zwei Optionsfelder in einem Formular und wollte den Status jedes Optionsfelds wissen. Das unten hat bei mir funktioniert:

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

In einem von JSF generierten Optionsfeld (mit <h:selectOneRadio>Tag) können Sie Folgendes tun:

radiobuttonvalue = jQuery("input[name='form_id\:radiobutton_id']:checked").val();

Dabei ist die selectOneRadio-ID radiobutton_id und die Formular-ID form_id .

Stellen Sie sicher , dass Sie wie angegeben den Namen anstelle der ID verwenden , da jQuery dieses Attribut verwendet (der Name wird automatisch von JSF generiert, das der Steuerelement-ID ähnelt).

Überprüfen Sie auch, ob der Benutzer nichts auswählt.

var radioanswer = 'none';
if ($('input[name=myRadio]:checked').val() != null) {           
   radioanswer = $('input[name=myRadio]:checked').val();
}

Ich habe ein jQuery-Plugin zum Festlegen und Abrufen von Optionsfeldwerten geschrieben. Es respektiert auch das "Änderungs" -Ereignis auf ihnen.

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

Platzieren Sie den Code an einer beliebigen Stelle, um das Add-In zu aktivieren. Dann genieße es! Es überschreibt nur die Standard-Val-Funktion, ohne etwas zu beschädigen.

Sie können diese jsFiddle besuchen, um sie in Aktion auszuprobieren und zu sehen, wie sie funktioniert.

Geige

Wenn Sie mehrere Optionsfelder in einer Form haben, dann

var myRadio1 = $('input[name=radioButtonName1]');
var value1 = myRadio1.filter(':checked').val();

var myRadio2 = $('input[name=radioButtonName2]');
var value2 = myRadio2.filter(':checked').val();

Das funktioniert bei mir.

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

Das funktioniert gut

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

Arbeitsdemo

Der :checkedSelektor arbeitet für checkboxes, radio buttonsund Elemente auswählen. Verwenden Sie nur für ausgewählte Elemente den :selectedSelektor.

API für :checked Selector

So ermitteln Sie den Wert des ausgewählten Radios, das eine Klasse verwendet:

$('.class:checked').val()

Ich benutze dieses einfache Skript

$('input[name="myRadio"]').on('change', function() {
  var radioValue = $('input[name="myRadio"]:checked').val();        
  alert(radioValue); 
});

Benutze das:

value = $('input[name=button-name]:checked').val();

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>

Wenn Sie nur 1 Optionsfeld in einem Formular haben, ist der jQuery-Code so einfach:

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

Ich habe eine Bibliothek veröffentlicht, um dabei zu helfen. Ruft tatsächlich alle möglichen Eingabewerte ab, enthält aber auch, welches Optionsfeld aktiviert wurde. Sie können es unter https://github.com/mazondo/formalizedata überprüfen

Es gibt Ihnen ein js-Objekt der Antworten, also eine Form wie:

<form>
<input type="radio" name"favorite-color" value="blue" checked> Blue
<input type="radio" name="favorite-color" value="red"> Red
</form>

werde dir geben:

$("form").formalizeData()
{
  "favorite-color" : "blue"
}

Verwenden Sie den folgenden jQuery-Code, um alle Optionsfeldwerte im JavaScript-Array abzurufen:

var values = jQuery('input:checkbox:checked.group1').map(function () {
    return this.value;
}).get();

Versuch es-

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

console.log(radioVal);

JQuery, um alle Optionsfelder im Formular und den aktivierten Wert abzurufen.

$.each($("input[type='radio']").filter(":checked"), function () {
  console.log("Name:" + this.name);
  console.log("Value:" + $(this).val());
});

Ein anderer Weg, um es zu bekommen:

 $("#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>

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

Aus dieser Frage heraus habe ich eine alternative Möglichkeit gefunden, auf die aktuell ausgewählte zuzugreifen, inputwenn Sie sich innerhalb eines clickEreignisses für das jeweilige Label befinden. Der Grund dafür ist, dass das neu ausgewählte inputerst nach dem labelKlickereignis aktualisiert wird .

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>

Was ich tun musste, war, den C # -Code zu vereinfachen, dh so viel wie möglich im Front-End-JavaScript zu tun. Ich verwende einen Fieldset-Container, weil ich in DNN arbeite und er eine eigene Form hat. Ich kann also kein Formular hinzufügen.

Ich muss testen, welches von 3 Textfeldern verwendet wird, und wenn ja, welche Art von Suche? Beginnt mit dem Wert, Enthält den Wert, Genaue Übereinstimmung des Werts.

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>

Und mein JavaScript ist:

        alert($('input[name=partNumber]:checked', '#fsPartNum').val()); 
    if(txtPartNumber.val() !== ''){
        message = 'Customer Part Number';
    }
    else if(txtCommercialPartNumber.val() !== ''){

    }
    else if(txtDescription.val() !== ''){

    }

Es kann nur gesagt werden, dass ein Tag mit einer ID enthalten ist. Für DNNer ist dies gut zu wissen. Das Endziel hierbei ist die Übergabe an den Code der mittleren Ebene, der zum Starten einer Teilesuche in SQL Server erforderlich ist.

Auf diese Weise muss ich auch nicht den viel komplizierteren vorherigen C # -Code kopieren. Das schwere Heben wird genau hier durchgeführt.

Ich musste ein bisschen danach suchen und dann daran basteln, damit es funktioniert. Für andere DNNer ist dies hoffentlich leicht zu finden.