如何用数组元素作为按钮的标签动态创建单选按钮

How to create radio buttons dynamically with array elements as label for buttons

本文关键字：标签 动态 创建 单选按钮 按钮 何用 数组元素      更新时间：2023-09-26

我要根据我从数据库调用的数组元素创建单选按钮。这个元素应该用作每个单选按钮的标签。我该如何为它编码。我正在调用6元素作为用户名建议。当客人选择任何按钮时，特定按钮的标签将替换为客人输入的名称类型。谢谢你

function showSuggestions() {
  var usernames = [
    'test1', 'test2', 'test3', 'test4'
  ];
  
  var result = $('#result');
  result.html('');
  for (var i = 0; i < usernames.length; i++) {
    result.append('<label><input type="radio" name="usernames" value="' + usernames[i] + '" /> ' + usernames[i] + '</label>');
  } 
}
                      
$('button').click(showSuggestions);
$('#result').on('change', 'input', function() {
  var elem = $(this);
  if (elem.is(':checked')) {
    $('#search').val(elem.val());
  }
});
label {
  display:block;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="search" type="search" /><button>Search</button>
<div id="result"></div>

相关文章：