Как создать радиокнопки, динамически назначая им значения, введенные пользователем? - PullRequest
Новая
       17

Как создать радиокнопки, динамически назначая им значения, введенные пользователем?

0 голосов
/ 26 февраля 2019

Я только начал изучать 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>

Ответы [ 2 ]

0 голосов
/ 26 февраля 2019

Если вы хотите отобразить текст рядом с вашим 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>
0 голосов
/ 26 февраля 2019 
                 <!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>

пожалуйста, попробуйте это

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...