Bootstrap-Optionsfeld: Ausgewählten Wert beim Absenden des Formulars abrufen

Ich habe die nächsten Bootstrap-Optionsfelder:

<div class="btn-group" id="filterDay" data-toggle="buttons">
  <label class="btn btn-default blue">
      <input type="radio" class="toggle" value="1"> Monday
  </label>
  <label class="btn btn-default blue">
      <input type="radio" class="toggle" value="2"> Tuesday
  </label>
  <label class="btn btn-default blue">
      <input type="radio" class="toggle" value="3"> Wednesday
  </label>
  <label class="btn btn-default blue">
      <input type="radio" class="toggle" value="4"> Thursday
  </label>
  <label class="btn btn-default blue">
      <input type="radio" class="toggle" value="5"> Friday
  </label>
  <label class="btn btn-default blue">
      <input type="radio" class="toggle" value="6"> Saturday
  </label>
  <label class="btn btn-default blue active">
      <input type="radio" class="toggle" value="0"> Sunday
  </label>
</div>

Ich versuche, den Wert der aktiven Schaltfläche abzurufen, wenn ich das Formular absende, ohne eine zu erstellen onclick Ereignis, einfach die aktive Schaltfläche von der abrufen $('#filterDay') Schaltflächengruppe. Es sollte einfach sein, aber ich habe keinen Weg gefunden, den Wert zu ermitteln. Ich habe mehrere Beispiele ausprobiert, aber alle haben nicht funktioniert.

Aktualisieren:

Dies ist der „gedruckte“ HTML-Code:

<label class="btn btn-default blue">
    <input type="radio" class="toggle" value="6"> Saturday
</label>    
<label class="btn btn-default blue active">
    <input type="radio" class="toggle" value="0"> Sunday
</label>

Der active Wert in der class Das Attribut ist das, was sich ändert, wenn ich auf die Schaltfläche klicke.

Verwenden Sie im Formularübermittlungshandler die :checked Wähler.

var filterDay = $('#filterDay input:radio:checked').val();

Sie sollten einen gemeinsamen Wert festlegen name Attribut zur Identifizierung des Formulars:

<div class="btn-group" id="filterDay" data-toggle="buttons">
   <label class="btn btn-default blue">
      <input type="radio" class="toggle" name="toggle" value="1"> Monday
   </label>
   <label class="btn btn-default blue">
      <input type="radio" class="toggle" name="toggle" value="2"> Tuesday
   </label>
   <label class="btn btn-default blue">
      <input type="radio" class="toggle" name="toggle" value="3"> Wednesday
   </label>
   <label class="btn btn-default blue">
      <input type="radio" class="toggle" name="toggle" value="4"> Thursday
   </label>
   <label class="btn btn-default blue">
      <input type="radio" class="toggle" name="toggle" value="5"> Friday
   </label>
   <label class="btn btn-default blue">
      <input type="radio" class="toggle" name="toggle" value="6"> Saturday
    </label>
   <label class="btn btn-default blue active">
      <input type="radio" class="toggle" name="toggle" value="0"> Sunday
   </label>
</div>

Und um den Wert so zu erhalten:

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

Versuche dies:

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

Weitere Informationen finden Sie in der Dokumentation von jQuery :checked Selektor und .val Attribut.

Im Code liegt ein logisches Problem:

<label class="btn btn-default blue active">
    <input type="radio" class="toggle" value="0"> Sunday
</label>

Das Etikett hat die active Klasse, sodass Bootstrap sie als aktiv anzeigt, aber das enthaltene Eingaberadio wird nicht überprüft, sodass es in reinem HTML nicht überprüft wird.

Richtiger Code:

<label class="btn btn-default blue active">
    <input type="radio" checked="checked" class="toggle" value="0"> Sunday
</label>

Verwenden Sie jQuery :checked Wähler.

Verwenden Sie jQuery .prop() Attribut, einfach so:

$('#radioButtonName').prop('checked');