0

Совсем не силён в JS. Есть группа чекбоксов. Нужно что бы можно было отметить только один чекбокс из группы (как радио), но при этом что бы была возможность его снять. То есть мы можем выбрать или линолеум или паркетную доску или ничего.

<div>
    <label>Покрытие пола:</label>
    <div>
        <div>
            <div>
                <input id="linoleum" name="cover" type="checkbox">
                <label for="linoleum" price="800">линолеум</label>
            </div>
        </div>
        <div>
            <div>
                <input id="parquet" name="cover" type="checkbox">
                <label price="1500" for="parquet">паркетная доска</label>
            </div>
        </div>
    </div>
</div>
<div>
    <label>Отделка стен:</label>
    <div>
        <div>
            <div>
                <input id="wallpaper" class="radio-check" name="decoration"
                    type="checkbox">
                <label for="wallpaper" price="500">обои</label>
            </div>
        </div>

        <div>
            <div>
                <input id="painting" class="radio-check" name="decoration" type="checkbox">
                <label for="painting" price="350">покраска стен</label>
            </div>
        </div>
    </div>
</div>

3 ответа 3

1

document.querySelectorAll('input[type="checkbox"]').forEach(c => {
  c.addEventListener('change', function() {
    let c = this.checked;
    document.querySelectorAll(`input[type="checkbox"][name="${this.name}"]`).forEach(e => e.checked = false);
    this.checked = c;
  });
});
<div>
  <label>Покрытие пола:</label>
  <div>
    <div>
      <div>
        <input id="linoleum" name="cover" type="checkbox">
        <label for="linoleum" price="800">линолеум</label>
      </div>
    </div>
    <div>
      <div>
        <input id="parquet" name="cover" type="checkbox">
        <label price="1500" for="parquet">паркетная доска</label>
      </div>
    </div>
  </div>
</div>
<div>
  <label>Отделка стен:</label>
  <div>
    <div>
      <div>
        <input id="wallpaper" class="radio-check" name="decoration" type="checkbox">
        <label for="wallpaper" price="500">обои</label>
      </div>
    </div>

    <div>
      <div>
        <input id="painting" class="radio-check" name="decoration" type="checkbox">
        <label for="painting" price="350">покраска стен</label>
      </div>
    </div>
  </div>
</div>

1

Берем чекбоксы в массив. Вешает обрабочик на них

window.onload = () => {
    var t = [
        document.getElementById('linoleum'),
        document.getElementById("parquet"),
        document.getElementById("wallpaper"),
        document.getElementById("painting")
    ];

    var ch = document.getElementsByClassName('radio-check');

    Array.from(ch).forEach(v => v.addEventListener('change', (e) => {
        var v = e.target.checked;
        t.forEach(v => v.checked = false);
        e.target.checked = v;
    }));
}
1

const cover = document.querySelectorAll('input[name="cover"]');

const uncheck = (evt) => {
  cover.forEach((ch) => {
    if(ch !== evt.currentTarget){
      ch.checked = false;
    }
  });
}

cover.forEach((ch) => ch.addEventListener('change', uncheck));
<div>
    <label>Покрытие пола:</label>
    <div>
        <div>
            <div>
                <input id="linoleum" name="cover" type="checkbox">
                <label for="linoleum" price="800">линолеум</label>
            </div>
        </div>
        <div>
            <div>
                <input id="parquet" name="cover" type="checkbox">
                <label price="1500" for="parquet">паркетная доска</label>
            </div>
        </div>
    </div>
</div>
<div>
    <label>Отделка стен:</label>
    <div>
        <div>
            <div>
                <input id="wallpaper" class="radio-check" name="decoration"
                    type="checkbox">
                <label for="wallpaper" price="500">обои</label>
            </div>
        </div>

        <div>
            <div>
                <input id="painting" class="radio-check" name="decoration" type="checkbox">
                <label for="painting" price="350">покраска стен</label>
            </div>
        </div>
    </div>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.