Получить выбранный переключатель без кнопки «Отправить»

Question

Я создаю радио-кнопки, и я хотел бы иметь возможность установить содержимое results для выбранной кнопки. БЕЗ кнопки отправки.

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>

Answer 2

Просто установите click события для кнопок и заполните область результатов в обратном вызове события. JQuery или Bootstrap не требуется.

Но для радиокнопок должен быть настроен атрибут value, чтобы при щелчке по одному значению было больше, чем по другим. Кроме того, autocomplete не имеет отношения к переключателям.

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

Answer 3

Если вы хотите использовать jQuery, вы можете воспользоваться методом делегата. https://api.jquery.com/delegate/#delegate -selector-eventType-handler

Используя делегата, вы установите только один обработчик, который будет обрабатывать изменение значения внутри группы переключателей. Таким образом, событие будет обрабатываться, даже если значение в группе переключателей будет изменяться «программно», то есть в результате выполнения другого кода на вашем веб-сайте, пока этот код будет отправлять событие «изменения».

Не забудьте добавить id в контейнер переключателей и атрибуты value в структуру HTML (вам в любом случае понадобится атрибут value на стороне сервера).

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

Здесь я добавил кнопку, чтобы вы могли получить статус при нажатии. Вы должны добавить атрибут value в ваши поля input.

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