JSFiddle - React, Tailwind, and code Playground

https://teratail.com/questions/344271

by Lhankor_Mhy

HTML

<p>レベル<br>
<input type="radio" name="l" value="1"> 1
<input type="radio" name="l" value="2"> 2
<input type="radio" name="l" value="3"> 3
<input type="radio" name="l" value="4"> 4
<input type="radio" name="l" value="5"> 5
</p>

<p>職業ランク<br>
<input type="radio" name="jr" value="1"> high
<input type="radio" name="jr" value="2"> medium
<input type="radio" name="jr" value="3"> lower
</p>

<p>スキルランク<br>
<input type="radio" name="sr" value="1"> high
<input type="radio" name="sr" value="2"> medium
<input type="radio" name="sr" value="3"> lower
</p>

<input type="checkbox" value="1">エリート

JavaScript

document.querySelectorAll('input').forEach(el=>el.addEventListener('change',e=>{
    document.querySelector('[type="checkbox"]').checked = 
    [,
        [,
            [, 0, 0, 1, 1, 1],
            [, 0, 0, 1, 1, 1],
            [, 0, 0, 0, 0, 0]
        ],
        [,
            [, 0, 0, 1, 1, 1],
            [, 0, 0, 0, 1, 1],
            [, 0, 0, 0, 0, 0]
        ],
        [,
            [, 0, 0, 0, 0, 0],
            [, 0, 0, 0, 0, 0],
            [, 0, 0, 0, 0, 0]
        ]
    ]
    [[...document.getElementsByName("jr")].flatMap(x => x.checked ? x.value : [])[0]]
    [[...document.getElementsByName("sr")].flatMap(x => x.checked ? x.value : [])[0]]
    [[...document.getElementsByName("l")].flatMap(x => x.checked ? x.value : [])[0]]
    
}))