Есть рабочий скрипт который добавляет класс блоку в зависимости от выбора радиокнопки в каждом блоке радиокнопок. Но после того как я обернул input в label для стилизации этих кнопок работать скрипт перестал. Я, к сожалению, полный ноль в javascript и jquery, поэтому прошу помощи. Подскажите, пожалуйста, где я напортачил? Сам код ниже:
window.onload = function() {
const shapes = ['square', 'circle', 'triangle-up', 'parallelogram', 'parallelogram-green', 'triangle-up-green', 'circle-green', 'square-green', 'square-black']
function showShape() {
const checkedIndexes = $('form :checked').toArray().map((n, i) => $(n).index());
const iShape = checkedIndexes[0] + checkedIndexes[1] * 3;
console.log(iShape);
$('#box').removeClass(shapes.join(' ')).addClass(shapes[iShape])
}
$('input[type="radio"]').change(showShape)
showShape()
}
#box {
text-align: center;
margin: 0 auto;
float: none;
}
.square {
top: 0;
display: block;
text-align: left;
float: left;
margin-right: 48px;
width: 446px;
height: 374px;
background-color: black;
}
.circle {
top: 0;
display: block;
text-align: left;
float: left;
margin-right: 48px;
width: 446px;
height: 374px;
background-color: red;
}
.triangle-up {
top: 0;
display: block;
text-align: left;
float: left;
margin-right: 48px;
width: 446px;
height: 374px;
background-color: green;
}
.parallelogram {
top: 0;
display: block;
text-align: left;
float: left;
margin-right: 48px;
width: 446px;
height: 374px;
background-color: blue;
}
.parallelogram-green {
top: 0;
display: block;
text-align: left;
float: left;
margin-right: 48px;
width: 446px;
height: 374px;
background-color: yellow;
}
.triangle-up-green {
top: 0;
display: block;
text-align: left;
float: left;
margin-right: 48px;
width: 446px;
height: 374px;
background-color: orangered;
}
.circle-green {
top: 0;
display: block;
text-align: left;
float: left;
margin-right: 48px;
width: 446px;
height: 374px;
background-color: #2DD14A;
}
.square-green {
top: 0;
display: block;
text-align: left;
float: left;
margin-right: 48px;
width: 446px;
height: 374px;
background-color: #2C5A77;
}
.square-black {
top: 0;
display: block;
text-align: left;
float: left;
margin-right: 48px;
width: 446px;
height: 374px;
background-color: #53076F;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
color: #333;
background-color: #eee;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 200;
font-size: 1em;
}
h1 {
text-align: center;
padding-bottom: 10px;
border-bottom: 2px solid #2fcc71;
max-width: 40%;
margin: 20px auto;
}
.container {
max-width: 850px;
width: 100%;
margin: 0 auto;
}
input[type="radio"] {
display: none;
}
label {
height: 100%;
background: white;
border: 2px solid hsla(150, 75%, 50%, 1);
padding: 1rem;
margin-bottom: 1rem;
text-align: center;
box-shadow: 0px 3px 10px -2px hsla(150, 5%, 65%, 0.5);
position: relative;
cursor: pointer;
}
input[type="radio"]:checked+label {
background: hsla(150, 75%, 50%, 1);
color: hsla(215, 0%, 100%, 1);
box-shadow: 0px 0px 20px hsla(150, 100%, 50%, 0.75);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<h1>ВЫБЕРИТЕ ПЛАН:</h1>
<div style="display: block; margin: 0 auto; text-align: center;">
<div style="display: inline-block;margin-right: 20px;margin-bottom: 40px;">
<h2>Количество человек:</h2>
<div>
<form>
<label for="1"><input id="1" name="form-1" type="radio" checked>1</label>
<label for="2"><input id="2" name="form-1" type="radio">2</label>
<label for="3"><input id="3" name="form-1" type="radio">4</label>
</form>
<br>
<br></div>
</div>
<div style="display: inline-block;margin-bottom: 40px;">
<h2>Количество дней:</h2>
<div>
<form>
<label for="4"><input id="4" name="form-2" type="radio" checked>3</label>
<label for="5"><input id="5" name="form-2" type="radio"> 5</label>
<label for="6"><input id="6" name="form-2" type="radio"> 7</label>
</form>
<br>
<br></div>
</div>
<div id="box">
</div>
</div>
</div>