Question

我正在尝试通过单击单选按钮来创建json对象。

[{"Name":"1","value":"1","option":"false"}]

Answer 1

$('button.save').click(function(){        
        var objects = [];        //Getting initialized each time
        $('li', $list).each(function(){
            objects.push({displayName: $('.displayName').val(), value: $('.value').val(), isDefault:$('.isDefault').val()});
        });

在上面的方法中，您将每个对象的值初始化为null（var objects = [];）。

所以喜欢

var objects = []; 
    $('button.save').click(function(){                          
            $('li', $list).each(function(){
                objects.push({displayName: $('.displayName').val(), value: $('.value').val(), isDefault:$('.isDefault').val()});
            });

JSFiddle

Answer 2

我认为问题在于你的添加，当你点击添加，然后设置显示名称和值。然后当你在save上迭代其他列表时，使用属于$（this）的属性

//添加

 $list.append('<input type="radio" class="isDefault" name="$('.displayName').val()" value="$('.value').val()"/><li>' + index +              '</li>');


//save
$('li', $list).each(function(){
    alert ($this).attr('name'));
    alert ($this).val());
    alert ($this).is("select"));

Answer 3

试试这个http://jsfiddle.net/8g8y9/18/：

TODO：重写

HTML

显示名称：

值

<hr/>
<ul id="ul">

</ul>

<div>
    <button id="add" type="button">Add</button>
    <button id="save" type="button">Save</button>
</div>
    </div>

的Javascript

function form(){
    var _counter = 1,
        _radios = [],
        _ul = null;

    this.init = function(ul){
        _ul = ul;
    };

    this.add = function(key, value){
        var li = document.createElement('li'),
            radio = document.createElement('input'),
            liText = document.createTextNode(_counter++);

        radio.setAttribute('type', 'radio');
        radio.setAttribute('key', key);
        //or value
        radio.setAttribute('value', value);

        li.appendChild(radio);
        li.appendChild(liText);

        _radios.push(radio);

        _ul.appendChild(li);
    },
    this.getData = function(){
        var data = [],
            item,
            i;

        for(i = 0; i < _radios.length; i++){
            item = {};

            item.key = _radios[i].getAttribute('key');
            //or value
            item.value = _radios[i].getAttribute('value');
            item.isDefault = _radios[i].checked ? 'true' : 'false';

            data.push(item);
        }

        return data;
    }

}

$(function(){
    var frm = new form();
    frm.init(document.getElementById('ul'));

    $('#add').on('click', function(){
        var inptKey = document.getElementById('input-key'),
            inptValue = document.getElementById('input-value');

        frm.add(inptKey.value, inptValue.value);
    })

    $('#save').on('click', function(){
        alert(JSON.stringify(frm.getData()));
    });

});

Answer 4

此示例创建一个json文件

自动保存

但它使用非常现代的技术。

它是纯粹的javascript。

var json=[],
v=document.getElementsByTagName('input'),
B=document.getElementsByTagName('button'),
result=document.getElementsByTagName('div')[0];

function add(){
 json.push({displayName:v[0].value,value:v[1].value,default:0});
 var div=document.createElement('div');
    div.innerHTML='name:'+v[0].value+
        ',value:'+v[1].value+
        ',default:<input type="radio" name="json">'
 result.appendChild(div);
}
function dl(){
 var l=json.length;
    while(l--){
     !result.childNodes[l].childNodes[1].checked||(json[l].default=1);
    }
 var A=document.createElement('a');
 A.download='data.json';
 A.textContent='data.json';
 A.href='data:application/json;base64,'+
 window.btoa(unescape(encodeURIComponent(JSON.stringify(json))))
 document.body.appendChild(A);
 var e=document.createEvent('Events');
     e.initEvent('click',true,false);
     A.dispatchEvent(e);
}
B[0].addEventListener('click',add,false);
B[1].addEventListener('click',dl,false);

（我写得非常快......）

所以，如果您有任何问题，请询问

<强>样本

http://jsfiddle.net/xS42c/

Chrome可能是唯一可以解决此问题的人。

下载属性+直接下载事件......

如果您想要更多支持，请删除A.download。

div元素数据到json

4 个答案: