使用 Javascript 或 Jquery 将单选按钮添加到 Html 表单答案

【问题标题】：Add Radio buttons to Html form using Javascript or Jquery使用 Javascript 或 Jquery 将单选按钮添加到 Html 表单
【发布时间】：2016-12-28 15:54:32
【问题描述】：

在我的 HTML 代码中

<form id="approve">
    <input name="myDate" id="monthYearPicker" />
    <button type="button"onclick="monthlytimesheets()">Submit</button>
</form>

在我的 Javascript 文件中，我有以下内容：-

function monthlytimesheets() {
    $.post('http://localhost:8000/timer/monthly_timesheet/',
        function(returnedData) {
            for(i=0;i<returnedData.length;i++) {
                for(j=i+1;j<returnedData.length;j++) {
                    if(returnedData[i]['id']==returnedData[j]['id']) {
                        returnedData.splice(j,1)
                    }
                }
            }
        });

现在我希望我的returnedData[i]['full_name'] 在 html 页面上呈现为单选按钮。我怎样才能做到这一点。如何从 JS 动态创建单选按钮？我也可以为这些单选按钮分配值吗？

【问题讨论】：

`returnedData.splice(j,1)`的值是多少
查找有关 append() 工作原理的文档。另一方面，您应该将 returnedData.length 值放入变量中，而不是一遍又一遍地重新计算。
$('form').append('<input type="radio" />Radio')
@user2181397 returnedData.splice(j,1) 返回一个没有重复值的数组。

标签： javascript jquery html post

【解决方案1】：

你可以像这样动态创建元素

var content = document.createElement('div');    
var newElement = document.createElement('input');
newElement.setAttribute('type', 'radio');

newElement.value = "Your value";   ///Here you can assigned value to the radio button

content.appendChild(newElement);

【讨论】：

什么是 newDiv.value ？它是未定义的。

【解决方案2】：

创建一个返回单选元素的函数。类似的问题已经被问过了。

可以在这里找到：How do you dynamically create a radio button in Javascript that works in all browsers?

function createRadioElement(name, checked) {
  var radioHtml = '<input type="radio" name="' + name + '"';
  if ( checked ) {
      radioHtml += ' checked="checked"';
  }
  radioHtml += '/>';

  var radioFragment = document.createElement('div');
  radioFragment.innerHTML = radioHtml;

  return radioFragment.firstChild;
}

请注意，这是从 Prestaul 发布的已发布链接的答案中截取的。

将其发布为评论，但需要 50rep 才能发表评论...

【讨论】：

【解决方案3】：

function monthlytimesheets()
{
	var name = $('#monthYearPicker').val();
	$('#approve').append('<input type="radio" />'+name);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="approve">
    <input name="myDate" id="monthYearPicker" />
    <button type="button"onclick="monthlytimesheets()">Submit</button>
</form>

【讨论】：

【解决方案4】：

您可以根据需要使用 jquery 轻松创建单选按钮。我编写了一个代码来展示如何创建radio 按钮dynamically。自动和单击按钮时。根据需要更改内部条件。试试下面的代码。

<html>
<head></head>
<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


<body>


<!-- Example one , add radio button using jquery automatically-->
<h1>Example one , add radio button using jquery automatically</h1>
<form id="approve">
    <input name="myDate" id="monthYearPicker" />
    <div class="lastone"></div>
</form>

<br><br><hr>
<!-- Example two, add radio button using jquery when button click-->
<h1>Example two, add radio button using jquery when button click-</h1>
<form id="approveone">
    <input name="myDate" id="monthYearPicker" />
    

    <div class="lasttwo"></div>
    <input type="button" id="addradio" value="submit">
</form>



</body>

<script type="text/javascript">

$(document).ready(function(){

    for(var i=0;i<5;i++)
    {
      var labelname = "radio button"+i;
      var value = i;
      var create = $('<input type="radio" value="'+value+'"><label>'+labelname+'</label><br>');
      $(".lastone").append(create);
    }

});


$(document).ready(function(){
  $("#addradio").click(function(){
    
    for(var i=0;i<9;i++)
    {
      var labelname = "radio button"+i;
      var value = i;
      var create = $('<input type="radio" value="'+value+'"><label>'+labelname+'</label><br>');
      $(".lasttwo").append(create);
    }


  });
  
});

</script>

</html>

【讨论】：