Ich erstelle Optionsfelder und möchte den Inhalt von results auf die ausgewählte Schaltfläche setzen können. OHNE Senden-Schaltfläche.

document.getElementById("results").innerHTML = NONE or A or B

Ich sehe viele Beiträge dazu, wie man dies mit einer SUBMIT-Schaltfläche macht, aber ich möchte, dass dies automatisch erkannt wird und ich habe Probleme, einen entsprechenden Beitrag zu finden. Jede Hilfe geschätzt!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" data-toggle="buttons">
  <label id='RADIO' class="btn btn-primary">
    <input type="radio" name="test" id="NONE" autocomplete="off">NONE
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="test" id="A" autocomplete="off">A
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="test" id="B" autocomplete="off">B
  </label>
</div>

<div id="results"></div>
0
MayaGans 19 Feb. 2020 im 22:51

4 Antworten

Beste Antwort
$( document ).ready(function() {
    console.log( "ready!" );
    $("input[name='test']").change(function(){
      $("#results").text($("input[name='test']:checked").val());
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" data-toggle="buttons">
  <label id='RADIO' class="btn btn-primary">
    <input type="radio" name="test" id="testNONE" autocomplete="off" value="NONE">NONE
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="test" id="testA" autocomplete="off" value="A">A
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="test" id="testB" autocomplete="off" value="B">B
  </label>
</div>

<div id="results"></div>
2
db1975 19 Feb. 2020 im 20:27

Richten Sie einfach click Ereignisse für die Schaltflächen ein und füllen Sie den Ergebnisbereich im Ereignisrückruf aus. Es ist kein JQuery oder Bootstrap erforderlich.

Für Optionsfelder muss jedoch das Attribut value konfiguriert sein, damit das Klicken auf eines über den anderen eine Bedeutung hat. Außerdem ist autocomplete bei Optionsfeldern irrelevant.

// Get a reference to the result area element
let results = document.getElementById("results");

// Set up a click handler on the parent of the radio buttons so that
// any clicks to the descendants will bubble up to the parent
document.querySelector("div.btn-group").addEventListener("click", function(evt){
  // Check if a radio button triggered the event
  if(evt.target.type === "radio"){
    // Populate the results area with the value of the clicked element
    results.textContent = evt.target.value;
  }
});
<div class="btn-group" data-toggle="buttons">
  <label id='RADIO' class="btn btn-primary">
    <input type="radio" name="test" value="NONE">NONE
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="test" value="A">A
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="test" value="B">B
  </label>
</div>

<div id="results"></div>
1
Scott Marcus 19 Feb. 2020 im 20:02

Wenn Sie die jQuery verwenden möchten, können Sie die Delegate-Methode nutzen. https://api.jquery.com/delegate/#delegate-selector- eventType-Handler

Mit dem Delegaten legen Sie nur einen Handler fest, der die Wertänderung innerhalb der Optionsfeldgruppe behandelt. Auf diese Weise wird das Ereignis auch dann behandelt, wenn sich der Wert in der Optionsfeldgruppe "programmgesteuert" ändert, dh als Ergebnis eines anderen Codes, der auf Ihrer Website ausgeführt wird, solange dieser Code das Ereignis "Ändern" auslöst.

Denken Sie daran, die Attribute id im Optionsfeldcontainer und value zur HTML-Struktur hinzuzufügen (Sie benötigen das Wertattribut ohnehin auf der Serverseite).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script>
  $(document).ready(function() {
    $("#option").delegate("[type=radio]", "change", function(event) {
      $("#results").text( $(event.target).val() );
    });
  });
</script>
<div id="option" class="btn-group" data-toggle="buttons">
  <label id='RADIO' class="btn btn-primary">
    <input type="radio" name="test" id="NONE" value="NONE" autocomplete="off">NONE
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="test" id="A" value="A" autocomplete="off">A
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="test" id="B" value="B" autocomplete="off">B
  </label>
</div>

<div id="results"></div>
0
Ismael 19 Feb. 2020 im 20:26

Hier habe ich eine Schaltfläche hinzugefügt, damit Sie den Status erhalten, wenn Sie darauf klicken. Sie sollten Ihren input Feldern ein value Attribut hinzufügen.

$(document).ready(function(){
  $(".detect").click(function(){
    var radioValue = $("input[name='test']:checked").val();
    if(radioValue){
      $(".results").text(radioValue);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" data-toggle="buttons">
  <label id='RADIO' class="btn btn-primary">
    <input type="radio" name="test" id="NONE" autocomplete="off">NONE
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="test" id="A" value="A" autocomplete="off">A
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="test" id="B" value="B" autocomplete="off">B
  </label>
</div>

<div class="results"></div>
<button class="detect">Detect</button>
0
KiaiFighter 19 Feb. 2020 im 20:09