2

为什么运行以下代码时单选按钮的文本无法呈现：

<div id='sctices'></div>​

var result = [
               {"id":"G84","value":"Mman, J"},
               {"id":"G95","value":"Ekara, G"},
               {"id":"G98","value":"Gedala, PS"}
             ];


var key, count = 0;
for(key in result) 
{
  var btnId = result[key].id;
  var btnValue = result[key].value;

    var radio = $("<input></input>",
    {
         type: 'radio',
         name: 'gtice',
         class: 'radio-default',
         checked: false,
         value: btnValue,
         id: btnId,
         text: btnValue
    });

//radio.text(btnValue);// did not work
radio.insertAfter("#sctices");
radio.wrap("<div></div>");
}

请帮忙。奇怪的是，文本出现在生成的源代码中。谢谢

4

2 回答 2

3

这是因为radio输入不显示任何文本。一般的做法是label在它旁边使用一个元素。尝试添加这一行：

var $label = $("<label></label>").text(btnValue).prepend(radio);

示例小提琴

于 2012-07-30T15:35:47.083 回答
0

这是我的版本

在我看来，源看起来更干净DEMO

var result = [
    {
    "id": "G84",
    "value": "Mman, J"},
{
    "id": "G95",
    "value": "Ekara, G"},
{
    "id": "G98",
    "value": "Gedala, PS"}
];


var key, count = 0;
for (key in result) {
    var btnId = result[key].id;
    var btnValue = result[key].value;
    var $div = $('<div/>');
    var $radio = $("<input/>", {
        type: 'radio',
        name: 'gtice',
        class: 'radio-default',
        checked: false,
        value: btnValue,
        id: btnId,
    });

    var $label = $("<label/>",{ 'for' : btnId}).text(btnValue);
    $("#sctices").append($div.append($radio).append($label));
 }

结果：

<div id="sctices">
  <div>
    <input type="radio" name="gtice" class="radio-default" value="Mman, J" id="G84">
    <label for="G84">Mman, J</label>
  </div>
  <div>
    <input type="radio" name="gtice" class="radio-default" value="Ekara, G" id="G95">
    <label for="G95">Ekara, G</label>
  </div>
  <div>
    <input type="radio" name="gtice" class="radio-default" value="Gedala, PS" id="G98">
    <label for="G98">Gedala, PS</label>
  </div>
</div>
于 2012-07-30T15:36:02.303 回答