Wie kann ich wissen, welche Optionsschaltfläche über jQuery ausgewählt ist?

Question

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

Ich kann sie alle auf diese Weise bekommen:

$("form :radio")

Woher weiß ich, welcher ausgewählt ist?

Answer 1

**Bitte probieren Sie das folgende Beispiel aus, um zu prü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>

Answer 2

Zusammen mit dem CSS-Selektor :checked können Sie auch die Funktion Stützenfunktion (ab jQuery 1.6). Ich kann mich nicht erinnern, was Projekt, das ich arbeitete, wo einfach mit $('#something').is(':checked') funktionierte nur manchmal, und ich benutzte dann auch $('#something').prop('checked') funktionierte, wenn es nicht funktionierte, aber es führte dazu, dass ich beides verwendete.

In meinem folgenden Codeausschnitt habe ich zwei Hilfsfunktionen geschrieben, is_checked y get_group_value . Die Funktion is_checked gibt einen booleschen true/false-Wert zurück; true, wenn die im Parameter übergebene Eingabe geprüft wird (prüft auch mit dem prop() Funktion) oder false, wenn sie nicht geprüft wird. Die Funktion get_group_value nimmt die name der Radioeingänge und gibt den Wert desjenigen zurück, der markiert ist, oder einen leeren String, wenn keiner markiert ist. Diese Hilfsfunktionen funktionieren auch mit Kontrollkästchen, nicht nur mit Optionsfeldern.

Da die Frage keine Definition enthielt cuando Ich habe ein paar Listener für vier (3) verschiedene Szenarien geschrieben: bei der Interaktion mit einer Optionsschaltfläche, beim Absenden des Formulars und beim Klicken auf eine dieser fest programmierten Schaltflächen, um den Wert der Gruppe einmalig abzurufen.

Bitte beachten Sie, dass ich "click" verwende, um zu erkennen, wann der Benutzer mit dem Radio-Eingabeelement interagiert, weil "change" nie ausgelöst wird, da das Attribut "value" nicht geändert wird, wenn es markiert ist oder nicht. Ich verwende dies sowohl für Kontrollkästchen als auch für Optionsfelder.

function is_checked(input) {
  var $input = $(input);
  return $input.is(':checked') || $input.prop('checked'); //Returns a boolean value. True if checked, false if not.
}
function get_group_value(group_name) {
  var $inputs = $('[name="' + group_name + '"]:checked');
  if ($inputs.length) { return $inputs.first().val(); } //If it exists, return the value of the first one found
  return ''; //If it doesn't exist, return nothing
}
$('form').on('submit', function(e) {
  e.preventDefault();
  var $form = $(this), results = {};
  $form.find('input[type=radio]').each(function() {
    var $input = $(this);
    if (is_checked(this)) {
      results[$input.attr('name')] = $input.val();
    }
  });
  console.info('Form Results', results);
});
$('form input[type=radio]').on('click', function(e) {
  var group_name = $(this).attr('name');
  console.info('Radio Button Click', group_name, get_group_value(group_name));
});
$('button.radio-button').on('click', function(e) {
  var group_name = $(this).attr('id');
  console.info('Button Click', group_name, get_group_value(group_name));
});

.my-test {
  background: #ffffff;
  color: #000000;
  padding: 16px;
}

form {
  padding: 8px;
  border: 1px solid #999999;
}

fieldset {
  border: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my-test">
  <form>
    Group 1
    <fieldset>
      <label><input type="radio" name="example-1" value="Foo" required />Foo</label>
      <label><input type="radio" name="example-1" value="Bar" required />Bar</label>
    </fieldset>
    Group 2
    <fieldset>
      <label><input type="radio" name="example-2" value="Banana" required />Banana</label>
      <label><input type="radio" name="example-2" value="Apple" required />Apple</label>
    </fieldset>
    <button type="submit">Submit</button>
  </form>
  <p>Press this button to just get the value of the first group: <button class="radio-button" id="example-1">Foo or Bar?</button></p>
  <p>Press this button to just get the value of the second group: <button class="radio-button" id="example-2">Banana or Apple?</button></p>
</div>

Answer 3

jQuery-Plugin zum Setzen und Abrufen von Radio-Button-Werten. Es respektiert auch die "Änderung" Ereignis auf sie.

 <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>
    <script type="text/javascript">
    $( document ).ready(function() {
     //Get all radios:
     var radios = jQuery("input[type='radio']");
     checked_radios=radios.filter(":checked");
for(i=0;i<checked_radios.length;i++)
{
   console.log(checked_radios[i]);
}

    });
    </script>

oder auf andere Weise

<script type="text/javascript">
$( document ).ready(function() {
  //Get all radios:
  checked_radios=jQuery('input[name=radio]:checked').val(); 
for(i=0;i<checked_radios.length;i++)
{
   console.log(checked_radios[i]);
}

});
</script>

Answer 4

Sie können die Funktion onChange()

  <input type="radio" name="radioName" value="1" onchange="radio_changed($(this).val())" /> 1 <br />
  <input type="radio" name="radioName" value="2" onchange="radio_changed($(this).val())"  /> 2 <br />
  <input type="radio" name="radioName" value="3"  onchange="radio_changed($(this).val())" /> 3 <br />

<script>
function radio_changed(val){
    alert(val);
}
</script>