2

我有以下代码，我正在尝试动态创建带有和不带有标签的单选按钮。创建单选按钮时，我无法将文本放在单选按钮中，这是没有标签的代码 这是期望的

<input type="radio" name="Alex" value="Alex"/>Alex


$('<input>').attr({
   type:'radio',
   name:'name',
   value: "Alex",
   text:"Alex"
}).insertAfter("#divid"));

现在有了标签，

<label><input type="radio" name="Alex" value="Alex"/>Alex<label>


//create a label tag
var label = $('<label>', { text:"Alex"});
//append input tag to label
$(label).append($('<input>').attr({
    type:'radio',
    name:"Alex",
    value:"Alex"
}).insertAfter("#divid"));

以上两种方法都不会在控制台上产生任何错误，但不会产生我感兴趣的正确 HTML 标签。还有一种方法可以在我动态创建它们时直接将标签添加到收音机。我的意思是我不想单独创建标签标签并将单选按钮附加到它。非常感谢您的帮助

4

3 回答 3

2

动态创建label和radio

jsBin 示例

var $input = $('<input />', {
  type : "radio",
  name : "name",
  value : "alex"
});

$("<label />", {
  insertAfter: "#somediv", // (or use appendTo: to insert into it)
  append: [$input, "Alex"] // include our $input and also some text description
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="somediv">DIV</div>

于 2013-06-06T23:17:40.080 回答
0

你应该替换var label = $('<label>').attr({ text:"Alex"});为var label = $('<label>').text("Alex");

另外-您的代码中几乎没有语法错误，我看不出正确复制+粘贴有什么困难。

于 2013-06-06T23:09:01.263 回答
0

我喜欢Roko 的回答，但如果您从用户内容构建单选按钮标签，它很容易受到 HTML 注入的影响。

在这里，我使用该.text()方法来确保文本被正确转义。

var $target = $('#target'),
    records = [{ id: 1, name: "Alex" },
               { id: 2, name: "Test that HTML <em>is not</em> injected" }];
$target.append('<h3>With Labels</h3>');
for (var i=0; i < records.length; i++) {
  $target.append($('<label>').text(records[i].name)
                 .prepend($('<input type="radio" name="mychoice">',
                            { value: records[i].id })));
}
$target.append('<h3>Without Labels</h3>');
for (var i=0; i < records.length; i++) {
  $target.append($('<span>').text(records[i].name)
                 .prepend($('<input type="radio" name="mychoice">',
                            { value: records[i].id })));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target"></div>

于 2015-06-19T22:58:28.153 回答