Get Selected Radio Button WITHOUT a Submit button

Question

I'm creating radio buttons and I'd like to be able to set the contents of results to the selected button. WITHOUT a submit button.

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

I see a lot of posts on how to do this with a SUBMIT button but I want this to be automatically detected and have struggled to find a relating post. Any help appreciated!

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

Answer 1

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

Answer 2

If you want to use the jQuery, you can take advantage of the delegate method. https://api.jquery.com/delegate/#delegate-selector-eventType-handler

Using the delegate, you'll set just one handler that will deal with the value change inside the radio button group. This way the event will be handled even if the value inside the radio buttons group will change "programmatically", that is as a result of another code running on your website as long as that code will dispatch the "change" event.

Remember to add the id on the radio buttons container and value attributes to the HTML structure (you will need the value attribute anyway on the server-side).

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

Answer 3

Here, I added a button so you can get the status when clicked. You should add a value attribute to your input fields.

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

Answer 4

Just set up click events for the buttons and populate the results area in the event callback. No JQuery or Bootstrap is required.

But, radio buttons need to have their value attribute configured so that clicking one has meaning over the others. Also, autocomplete is irrelevant with radio buttons.

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