Не работает радиокнопка?

Question

Почему может не работать радиокнопка? Спасибо

.payment-methods__form {
  position: relative;
  padding: 30px 23px;
  display: flex;
}

.payment-methods__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}

.payment-methods__checked {
  position: relative;
  cursor: pointer;
  padding: 40px 30px;
  border: 1px solid #e3e3e3;
  opacity: 0.4;
  flex: 1 1 auto;
}

.payment-methods__label {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  font-size: 30px;
  line-height: math.div(35, 30);
  height: 100%;
}

.payment-methods__input:checked + .payment-methods__checked {
    background: rgba(239, 239, 239, 0.44);
    border: 1px solid rgba(239, 239, 239, 0.44);
    opacity: 1;
}

<div class="payment-methods__form">
  <input checked class="payment-methods__input" type="radio" value="1" name="form[]">
  <div class="payment-methods__checked">
    <div class="payment-methods__label">карты</div>
  </div>
</div>
<div class="payment-methods__form">
  <input class="payment-methods__input" type="radio" value="2" name="form[]">
  <div class="payment-methods__checked">
    <div class="payment-methods__label">карты</div>
  </div>
</div>

Answer 1

.payment-methods__form {
  position: relative;
  padding: 30px 23px;
  display: flex;
}

.payment-methods__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index : 1;
}

.payment-methods__checked {
  position: relative;
  cursor: pointer;
  padding: 40px 30px;
  border: 1px solid #e3e3e3;
  opacity: 0.4;
  flex: 1 1 auto;
}

.payment-methods__label {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  font-size: 30px;
  line-height: math.div(35, 30);
  height: 100%;
}

.payment-methods__input:checked + .payment-methods__checked {
    background: rgba(239, 239, 239, 0.44);
    border: 1px solid rgba(239, 239, 239, 0.44);
    opacity: 1;
}

<div class="payment-methods__form">
  <input checked class="payment-methods__input" type="radio" value="1" name="form[]">
  <div class="payment-methods__checked">
    <div class="payment-methods__label">карты</div>
  </div>
</div>
<div class="payment-methods__form">
  <input class="payment-methods__input" type="radio" value="2" name="form[]">
  <div class="payment-methods__checked">
    <div class="payment-methods__label">карты</div>
  </div>
</div>

Answer 2

уберите visibility: hidden и поменяйте div'ы на label

.payment-methods__form {
  position: relative;
  padding: 30px 23px;
  display: flex;
}

.payment-methods__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.payment-methods__checked {
  position: relative;
  cursor: pointer;
  padding: 40px 30px;
  border: 1px solid #e3e3e3;
  opacity: 0.4;
  flex: 1 1 auto;
}

.payment-methods__label {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  font-size: 30px;
  line-height: math.div(35, 30);
  height: 100%;
}

.payment-methods__input:checked + .payment-methods__checked {
    background: rgba(239, 239, 239, 0.44);
    border: 1px solid rgba(239, 239, 239, 0.44);
    opacity: 1;
}

<label class="payment-methods__form">
  <input checked class="payment-methods__input" type="radio" value="1" name="form[]">
  <div class="payment-methods__checked">
    <div class="payment-methods__label">карты</div>
  </div>
</label>
<label class="payment-methods__form">
  <input class="payment-methods__input" type="radio" value="2" name="form[]">
  <div class="payment-methods__checked">
    <div class="payment-methods__label">карты</div>
  </div>
</label>

БЛОГ НА HUSL

Не работает радиокнопка?

Ответы (2 шт):