Группа флажков Div по атрибуту

Question

У HI есть несколько флажков с некоторыми атрибутами внутри div. Предположим, что все флажки отмечены.

<div id="osVersion"> 
    <input type="checkbox" id="chk1" osid="1" versionid="21" /> 
    <input type="checkbox" id="chk2" osid="2" versionid="22" /> 
    <input type="checkbox" id="chk3" osid="2" versionid="11" /> 
    <input type="checkbox" id="chk4" osid="1" versionid="1" /> 
    <input type="checkbox" id="chk5" osid="3" versionid="55" /> 
    <input type="checkbox" id="chk6" osid="2" versionid="45" /> 
    <input type="checkbox" id="chk7" osid="3" versionid="78" /> 

</div> 

Я могу раздвинуть AttrS в массив, как этот

var osVersions = []; 
    function showOutput() { 

     $("#osVersion input:checked").each(function (i) { 

      osVersions.push({ "osid": $(this).attr("osid"), "versionid": $(this).attr("versionid") }); 

      // osVersions.versions.push($(this).attr("versionid")); 
     }); 
     } 

я хочу, чтобы создать объект JSON отфильтрованный на основе OSId в указанном ниже формате

{ 
"osversions" : [ 
    { 
     "osId" : 1, 
     "versions" : [21,1] 
    },{ 
     "osId" : 2, 
     "versions" : [22,11,45] 
    },{ 
     "osId" : 3, 
     "versions" : [55,78] 
    } 
], 
"name" : "test", 
"xyz":"test" 

} 

заморачиваться на как фильтровать.

Answer 1

Вы можете использовать петлю как

$('button').click(function() { 
 
    var obj = { 
 
     "osversions": [], 
 
     "name": "test", 
 
     "xyz": "test" 
 
    }, 
 
    tmp = {}; 
 
    $("#osVersion input:checked").each(function() { 
 
    var $this = $(this), 
 
     osid = $this.attr('osid'); 
 
    if (!tmp[osid]) { 
 
     tmp[osid] = { 
 
     "osId": osid, 
 
     "versions": [] 
 
     }; 
 
     obj.osversions.push(tmp[osid]); 
 
    } 
 
    tmp[osid].versions.push($this.attr('versionid')) 
 
    }); 
 
    //here obj is a properly formatted object 
 
    console.log(obj) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="osVersion"> 
 
    <input type="checkbox" id="chk1" osid="1" versionid="21" /> 
 
    <input type="checkbox" id="chk2" osid="2" versionid="22" /> 
 
    <input type="checkbox" id="chk3" osid="2" versionid="11" /> 
 
    <input type="checkbox" id="chk4" osid="1" versionid="1" /> 
 
    <input type="checkbox" id="chk5" osid="3" versionid="55" /> 
 
    <input type="checkbox" id="chk6" osid="2" versionid="45" /> 
 
    <input type="checkbox" id="chk7" osid="3" versionid="78" /> 
 
</div> 
 
<button>Test</button>

Демо: Fiddle