javascript - 获取没有提交按钮的选定单选按钮

Question

我正在创建单选按钮，并且希望能够将结果 的内容设置为所选按钮。没有提交按钮。

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

我看到很多关于如何使用“提交”按钮执行此操作的帖子，但我希望自动检测到这一点，并且很难找到相关的帖子。任何帮助表示赞赏!

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