使用单选按钮将文本输入动态添加到列表中

Add text input dynamically to list with radio buttons

本文关键字：添加 列表 动态 输入 单选按钮 文本      更新时间：2023-09-26

我有一个元素列表（样式取自引导），我想使用文本输入添加更多元素。这是我的代码-

<div class="col-lg-6">
    <div class="input-group">
      <input type="text" id = "input" class="form-control">
      <span class="input-group-btn">
      <button class="btn btn-default" type="button" id = "add" >Add</button>
      </span>
    </div><!-- /input-group -->
<form>
    <ul class="list-group" id = "tagList">
  <li class="list-group-item"> <b>Tags </b></li>  
  <li class="list-group-item"> <span class ="input-group-addon">
    <input type="radio">
    </span>Apple</li>
  <li class="list-group-item"> <span class ="input-group-addon">
    <input type="radio">
    </span> Orange</li>
  <li class="list-group-item"> <span class ="input-group-addon">
    <input type="radio">
    </span> Pear</li>
  <li class="list-group-item"> <span class ="input-group-addon">
    <input type="radio">
    </span> Banana</li>
</ul>
</form>

<script src="http://codeorigin.jquery.com/jquery-2.0.3.js"></script>
<script>
$('#add').click(function(){
    var text = $('#input').val();
    if(text.length){
        $('<li />', {html: text}).appendTo('ul.tagList')
    }
});
 </script>

我可以让代码使用更简单的列表，但不能使用这个列表。谁能发现为什么不呢？

你的 li 没有关闭：

 <li class="list-group-item" <span class ="input-group-addon">
    <input type="radio">
    </span>Apple</li>

应该是：

 <li class="list-group-item"><span class ="input-group-addon">
    <input type="radio">
    </span>Apple</li>

一旦您将代码放入SO上突出显示的代码中，发现此类问题总是很有趣。

为了使您的 JavaScript 正常工作，您可以使用以下内容： http://jsfiddle.net/jX2K3/21/

尝试以下代码。

    $('#add').click(function(){
    var text = $('#input').val();
    if(text.length){        
    $('ul').append('<li class="list-group-item"><span class ="input-group-addon"> <input type="radio">    </span>'+text+'</li>');
    }
});

js小提琴

相关文章：