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

Add Radio buttons to Html form using Javascript or Jquery

本文关键字：添加 Html 表单 单选按钮 Javascript Jquery 使用      更新时间：2023-09-26

在我的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动态创建单选按钮?我也可以分配值给这些单选按钮?

您可以使用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>

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

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);

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

可以在这里找到:如何在Javascript中动态地创建一个可以在所有浏览器中工作的单选按钮?

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来评论…

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>

相关文章：