PonyS,
не нужно копировать целииком ответ!
для любых name="f..."
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.hot {
display: none;
}
.hot.open {
display: block;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var a = document.querySelectorAll(".hot"),
d = a.length,
b = document.querySelectorAll("[name^='f']"),
e = a[0];
[].forEach.call(b, function(f, g) {
var c = g % d;
f.addEventListener("click", function() {
e.classList.remove("open");
a[c].classList.add("open");
e = a[c];
[].forEach.call(b, function(a, b) {
a.checked = b % d == c
})
})
})
});
</script>
</head>
<body>
<style type="text/css">
.hot{
border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px
}
</style>
<input name="f" type="radio" >
<input name="f" type="radio" >
<input name="f" type="radio" >
<input name="fa" type="radio" >
<input name="fa" type="radio" >
<input name="fa" type="radio" >
<div class="hot open" >0</div>
<div class="hot" >1</div>
<div class="hot" >2</div>
</body>
</html>