JSFiddle - React, Tailwind, and code Playground

by hiral

HTML

<form id="checkbox">
    <input type="checkbox" value="case1-red-1" />case1-red-1
    <input type="checkbox" value="case2-blue-2" />case2-blue-2
    <input type="checkbox" value="case1-blue-4" />case1-blue-4
    <input type="checkbox" value="case3-green-3" />case3-green-3</form>
<div id="result"></div>

JavaScript

var cases = [{}];
$('#checkbox :checkbox').each(function (index, element) {
    var cas = $(this).val().split('-')[0];
    var color = $(this).val().split('-')[1];
    var id = $(this).val().split('-')[2];
    var obj = {
        id: id,
        color: color
    };
    var ary = [obj];
    if (cases[0][cas]) {
        cases[0][cas].push(obj);
    } else {
        cases[0][cas] = ary;
    }
});
$("#result").text(JSON.stringify(cases));