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

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

在这里，我添加了一个按钮，以便您可以在单击时获得状态。 您应该向input字段添加value属性。

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

如果你想使用 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>