javascript jQuery -如何用标签 Package 输入标签

yacmzcpb 于 2022-12-17 发布在 Java

关注(0)|答案(5)|浏览(171)

我想用标签和li标签 Package 输入标签。

<li><label><input type="checkbox" value="1">Apple</label></li>
<li><label><input type="checkbox" value="2">Banana</label></li>
<li><label><input type="checkbox" value="3">Orange</label></li>

但是，输出如下...

<li><label><input type="checkbox" value="1">Apple</input></label></li>
<li><label><input type="checkbox" value="2">Banana</input></label></li>
<li><label><input type="checkbox" value="3">Orange</input></label></li>

我无法删除</input>
我的代码：
一个二个一个一个

JavaScript

来源：https://stackoverflow.com/questions/55868958/jquery-how-to-wrap-input-tag-with-label

5条答案

按热度按时间

lztngnrs1#

您正在设置tag_input变量的text，而不是tag_label。

var foods = [{id:1, name:'Apple'},{id:2, name:'Banana'},{id:3, name:'Orange'}];

for(var f in foods) {
  var tag_input = $('<input type="checkbox">');
      tag_li = $('<li>')
      tag_label = $('<label>');
  tag_input.val(foods[f]['id']);
  tag_label.append(tag_input);
  tag_label.append(foods[f]['name']);
  var tag = tag_li.append(tag_label);
  console.log(tag[0].outerHTML);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

注意，我对代码进行了一些重新排列，使标签文本位于复选框之后，如预期输出所示。基本上，先追加输入，然后追加文本。

赞(0）回复(0）举报 2022-12-17

qltillow2#

一个选项是构造HTML字符串，如下所示：

var foods = [{id:1, name:'Apple'},{id:2, name:'Banana'},{id:3, name:'Orange'}];
var html = "";

foods.forEach(function(o) {
  html += '<li><label><input type="checkbox" value="' + o.id + '" />' + o.name + '</label></li>';
});

console.log(html);

如果要将HTML字符串附加到<body>，可以：

$("body").append(html);

赞(0）回复(0）举报 2022-12-17

xqkwcwgp3#

您可以将文本添加到您的label而不是input，并将prepend添加到input：

var foods = [{id:1, name:'Apple'},{id:2, name:'Banana'},{id:3, name:'Orange'}];

for(var f in foods) {
  var tag_input = $('<input type="checkbox">');
      tag_li = $('<li>')
      tag_label = $('<label>');
  tag_input.val(foods[f]['id']);
  tag_label.text(foods[f]['name']);

  var tag = tag_li.append(tag_label.prepend(tag_input))
  console.log(tag[0].outerHTML);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

赞(0）回复(0）举报 2022-12-17

nkcskrwz4#

你试图把name属性作为input的文本而不是label的文本，因此它为input添加了结束标记。你可以使用string来创建html元素，而不是创建新元素，见下面的代码

var foods = [{id:1, name:'Apple'},{id:2, name:'Banana'},{id:3, name:'Orange'}];

for(var f in foods) {
  var tag = "<li><label><input type='checkbox' value='" + foods[f]['id'] + "'>" + foods[f]['name'] +"</label></li>";
  var $tag = $(tag);
  console.log($tag.html());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

赞(0）回复(0）举报 2022-12-17

fnvucqvd5#

您可以通过一行简单的代码来实现您的目标，该代码利用了模板字符串和Array.prototype.reduce()方法的优点：

const src = [{id:1, name:'Apple'},{id:2, name:'Banana'},{id:3, name:'Orange'}];

const res = src.reduce((html, {id, name}) => 
  html+=`<li><label><input type="checkbox" value="${id}">${name}</label></li>`, '');

console.log(res);

.as-console-wrapper {min-height: 100%}

赞(0）回复(0）举报 2022-12-17

我来回答

javascript jQuery -如何用标签 Package 输入标签

5条答案

相关问题

热门标签

最新问答