在没有提交按钮的情况下获取选定的单选按钮

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

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>

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

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>