JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="https://raw.github.com/macek/jquery-serialize-object/master/jquery.serialize-object.js"></script>

<form action="" method="post">

Charakter 1:<br/>
<input type="radio" name="charakter1" value="0" checked />0
<input type="radio" name="charakter1" value="1"/>1
<input type="radio" name="charakter1" value="2"/>2
<input type="radio" name="charakter1" value="3"/>3<br/>
        
Charakter 2:<br/>
<input type="radio" name="charakter2" value="0"/>0
<input type="radio" name="charakter2" value="1"/>1
<input type="radio" name="charakter2" value="2" checked />2
<input type="radio" name="charakter2" value="3"/>3<br/>
        
Charakter 3:<br/>
<input type="radio" name="charakter3" value="0"/>0
<input type="radio" name="charakter3" value="1"/>1
<input type="radio" name="charakter3" value="2"/>2
<input type="radio" name="charakter3" value="3" checked />3<br/>
        
Charakter 4:<br/>
<input type="radio" name="charakter4" value="0"/>0
<input type="radio" name="charakter4" value="1" checked />1
<input type="radio" name="charakter4" value="2"/>2
<input type="radio" name="charakter4" value="3"/>3<br/>

<p><input type="submit" /></p>
</form>
<h2>JSON</h2>
<pre id="result">
</pre>

CSS

#result {
    margin: 10px;
    background: #eee;
    padding: 10px;
    height: 40px;
    overflow: auto;
}

JavaScript

$(function() {
    $('form').submit(function() {
        $('#result').text(JSON.stringify($('form').serializeObject()));
        return false;
    });
});