Question

我刚刚开始学习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>

Answer 1

如果要在radio旁边显示一些文本，建议您使用label并将其绑定到具有属性radio的{{1}}。 / p>

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*/
});

Answer 2

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

请尝试这个

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

2 个答案: