Есть ли в js способ выделить все элементы КРОМЕ текущего?

Question

У меня есть 4 кнопки. У всех по умолчанию стоит класс "off". При клике по кнопке он сменяется на "on", если снова нажать по этой же кнопке то обратно на "off".

Проблема в следующем: Как я сказал у меня 4 кнопки и если на них все нажать то у всех класс будет'on', мне надо сделать так чтобы только одна из 4 кнопок могла быть в состоянии on, то есть та которая была нажата в данный момент включается, все остальные выключаются.

Вот как я пробовал это реализовать. Проблема моего способа в том что надо 2 раза нажать на кнопку чтобы выключилась предыдущая, мне нужно чтобы переключение происходило в 1 клик:

Красным фоном я кнопки выделил просто для наглядности

let toggleState = function (item) {
    if (item.className == 'off') {
        item.className = 'on';
    }
    else {
        item.className = 'off'
    }
    let itemsOn = document.querySelectorAll('.on');
    for (let i = 0; i < itemsOn.length; i++)
    if (itemsOn.length > 1) {
        itemsOn[i].className = 'off';
    }
}

.on {
    background-color: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <input type="button" value="1" class="off" onclick="toggleState(this)">
    <input type="button" value="2" class="off" onclick="toggleState(this)">
    <input type="button" value="3" class="off" onclick="toggleState(this)">
    <input type="button" value="4" class="off" onclick="toggleState(this)">

    <script src="js.js"></script>
</body>
</html>

Answer 1

Самое простое: при клике у всех убрать on, а у текущего добавить. Вот и всё. И никакие off не нужны (а если нужны, то добавить ещё две строчки - одну в цикл, другую вне его).

let toggleState = function (item) {
    document.querySelectorAll('.my-btn').forEach(el => {
        el.classList.remove('on');
    });
    
    item.classList.add('on');
}

.on {
    background-color: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <input type="button" value="1" class="my-btn" onclick="toggleState(this)">
    <input type="button" value="2" class="my-btn" onclick="toggleState(this)">
    <input type="button" value="3" class="my-btn" onclick="toggleState(this)">
    <input type="button" value="4" class="my-btn" onclick="toggleState(this)">

    <script src="js.js"></script>
</body>
</html>

Answer 2

Можно и без JavaScript

input[type="radio"] {
  display: none;
}

label {
  margin: 5px;
  padding: 1px 5px 1px 5px;
  border: 1px solid #666;
  border-radius: 3px;
  background: #ccc;
}

input[type="radio"]:checked+label {
  background: #f00;
  color: #fff;
}

<input name="radiobox" id="input1" type="radio" value="1">
<label for="input1" class="button">btn1</label>
<input name="radiobox" id="input2" type="radio" value="2">
<label for="input2" class="button">btn2</label>
<input name="radiobox" id="input3" type="radio" value="3">
<label for="input3" class="button">btn3</label>
<input name="radiobox" id="input4" type="radio" value="4">
<label for="input4" class="button">btn4</label>

БЛОГ НА HUSL

Есть ли в js способ выделить все элементы КРОМЕ текущего?

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