Woher weiß ich, welches Optionsfeld über jQuery ausgewählt ist?

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 Funktion filter(), nicht find(). (find() dient zum Auffinden von untergeordneten/absteigenden Elementen, wohingegen filter() Elemente der obersten Ebene Ihrer Auswahl durchsucht.)

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

Hinweise: Diese Antwort korrigierte ursprünglich eine andere Antwort, die die Verwendung von find() empfahl, die sich anscheinend geändert hat. find() kann immer noch nützlich sein, wenn Sie bereits einen Verweis auf ein Containerelement hatten, nicht jedoch 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 um die Eingabe verwendete "": "" und nicht wie bei der Lösung von Peter J

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

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

Wenn Sie nur den booleschen Wert haben möchten, d. H.

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

Holen Sie sich alle Radios:

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

Filter, um das zu erhalten, das geprüft wird

radios.filter(":checked")

Eine weitere Option ist:

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

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

So schreibe ich das Formular und erledige das Abrufen des geprüften Radios.

Verwenden Sie ein Formular 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 Sie Folgendes verwenden:

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

Dann wird der geprüfte Wert erhalten:

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

Mit einem Klassennamen in der Eingabe kann ich die Eingaben einfach gestalten ...

In meinem Fall habe ich zwei Optionsfelder in einem Formular, und ich wollte den Status der einzelnen Tasten wissen ...

// 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 vonJSFgenerierten Optionsfeld (mit <h:selectOneRadio>-Tag) können Sie Folgendes tun:

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

wobei selectOneRadio ID radiobutton_id ist und form ID form_id ist.

Verwenden Sie name anstelle von id , wie angegeben, da jQuery dieses Attribut verwendet ( name wird automatisch von der JSF generiert, die der Steuerungs-ID ähnelt).

Ich habe ein jQuery-Plugin zum Einstellen und Abrufen von Auswahlknopfwerten geschrieben. Es respektiert auch das "change" -Ereignis bei 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);

Fügen Sie den Code an einer beliebigen Stelle ein, um das Add-In zu aktivieren. Dann genieße es! Es überschreibt einfach die Standardwertfunktion, ohne irgendetwas zu brechen.

Sie können dieses jsFiddle-Programm besuchen, um es in Aktion zu testen und zu sehen, wie es funktioniert.

Fiddle

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

Wenn Sie mehrere Optionsfelder in einem Formular haben, 

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

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

Das funktioniert für mich.

Das funktioniert gut

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

Arbeitsdemo

Der :checked-Selektor funktioniert für checkboxes, radio buttons und Auswahlelemente. Verwenden Sie nur für Auswahlelemente den Selektor :selected.

API für :checked Selector

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

So erhalten Sie den Wert des ausgewählten Funkgeräts, das eine Klasse verwendet:

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

Benutze das:

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

Ich benutze dieses einfache Skript

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

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

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

Ich habe eine Bibliothek veröffentlicht, die mir dabei hilft. Zieht eigentlich alle möglichen Eingabewerte ein, schließt aber auch ein, welches Optionsfeld markiert 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"
}

Um alle Werte der Optionsfelder in einem JavaScript-Array abzurufen, verwenden Sie den folgenden jQuery-Code:

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

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>

JQuery, um alle Optionsfelder im Formular und den geprüften Wert abzurufen.

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

Was ich tun musste, war die Vereinfachung von C # -Code, dh im Frontend-JavaScript möglichst viel. Ich verwende einen Fieldset-Container, da ich in DNN arbeite und ein eigenes Formular hat. Also kann ich kein Formular hinzufügen.

Ich muss testen, welches Textfeld von 3 verwendet wird und wenn ja, wie wird es gesucht? Beginnt mit dem Wert, Enthält den Wert, Exakte Ü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 ein beliebiges Tag mit einer ID verwendet werden. Für DNNers ist das gut zu wissen. Das Endziel ist hier die Weitergabe an den Code der mittleren Ebene, der zum Starten einer Teilesuche in SQL Server erforderlich ist.

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

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

Von dieser Frage habe ich einen alternativen Weg gefunden, auf die aktuell ausgewählte input zuzugreifen, wenn Sie sich in einem click-Ereignis für das jeweilige Label befinden. Der Grund dafür ist, dass die neu ausgewählte input erst nach dem Klickereignis ihrer label 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>

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

** Bitte versuchen Sie es mit dem folgenden Beispiel, um zu überprüfen, welches Optionsfeld ausgewählt ist **

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

Wie wäre es damit?

Mit change wird der Wert des Radiotyps geprüft ...

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

Sie benötigen Zugriff mit dem Selektor :checked:

Überprüfen Sie dieses Dokument:

• https://api.jquery.com/checked-selector/

ein Beispiel:

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