如何创建单选按钮动态分配用户输入的值？答案

【问题标题】：How to I create radio buttons dynamically assigning them values entered by user?如何创建单选按钮动态分配用户输入的值？
【发布时间】：2019-07-20 03:54:15
【问题描述】：

我刚刚开始学习jQuery。我试图根据用户输入制作一个待办事项列表。我试图从输入字段中捕获值并传递给无线电的输入类型。但是，尽管传递了值，但创建的元素并未显示用户输入。我的代码如下

jQuery

$("#addtodo").click(function(){
    var newtodo = $("#todoinputval").val(); /*Getting input value when and                                            storing it*/

    $("#todoinputval").val(" "); /*Resetting input field*/

    var newradio = $("<input type='radio'>").val(newtodo); /*creating a variable to be appended to my desired div */

    $("#radiotodo").append(newradio); /* Appending it to my desired div*/
});

HTML

<input id="todoinputval" type="text"><br>
<button id="addtodo">Add</button>
<div id="radiotodo"></div>

【问题讨论】：

单选按钮不包含用户将看到的任何类型的可见文本。如果你想在输入旁边显示一些文本，你必须添加类似label
@CarstenLøvboAndersen 我想创建一个单选按钮列表，其中每个按钮都包含来自用户的输入。
“包含输入”是什么意思，单选按钮应该有值还是？因为那已经是你所拥有的
@CarstenLøvboAndersen 我希望单选按钮显示用户输入。

标签： jquery input radio-button

【解决方案1】：

                 <!DOCTYPE html>
                 <html>
                <head>
               <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
               <script>
              $(document).ready(function(){
                $("#addtodo").click(function(){
                var value=$('#todoinputval').val();
                 $('#radiotodo').append('<input type="radio"  value="'+value+'">                            '+value+'<br>');
                });
           });
       </script>
      </head>
      <body>

       <input id = "todoinputval" type = "text"><br>
       <button id ="addtodo">Add</button>
       <div id= "radiotodo"></div>

     </body>
      </html>

请试试这个

【讨论】：

您应该始终解释为什么这有助于并解决 OP 的问题
感谢您的建议....我会在以后的回答中记住这一点:)

【解决方案2】：

如果你想在radio 旁边显示一些文字，我建议你使用label 并将其绑定到radio 属性for。

$("#addtodo").click(function() {
  var newtodo = $("#todoinputval").val();
  var inputCount = $("#radiotodo input").length;
  $("#todoinputval").val("");
  var newradio = $("<input type='radio'>").val(newtodo).attr("id","radio"+inputCount);
  var RadioLabel = $("<label>").attr("for","radio"+inputCount).text(newtodo);
  $("#radiotodo").append(newradio).append(RadioLabel); 
});

工作演示

$("#addtodo").click(function() {
  var newtodo = $("#todoinputval").val();
  var inputCount = $("#radiotodo input").length;
  $("#todoinputval").val(""); /*Resetting input field*/
  var newradio = $("<input type='radio'>").val(newtodo).attr("id","radio"+inputCount);
  var RadioLabel = $("<label>").attr("for","radio"+inputCount).text(newtodo);
  $("#radiotodo").append(newradio).append(RadioLabel); /* Appending it to my desired div*/
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="todoinputval" type="text"><br>
<button id="addtodo">Add</button>
<div id="radiotodo"></div>

【讨论】：