[lev90]

Мне необходимо добавить кнопку "Сброс", для сброса значений всех радиокнопок и показать исходные значения <div class="selected"> All ...</div> или значения первых label списков.

.select-box {
         display: flex;
         width: 100%;
         flex-direction: column;
      }

      .select-box .options-container {
         background: #2f3640;
         color: #f5f6fa;
         opacity: 0;
         transition: all 0.4s;
         border-radius: 8px;
         overflow: hidden;
         order: 1;
         position: absolute;
         top: 70px;
         max-height: 0;
      }

      .selected {
         background: #2f3640;
         border-radius: 8px;
         color: #f5f6fa;
         position: relative;
         order: 0;
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
         width: 250px;
      }

      .selected::after {
         content: "";
         background: url("/img/arrow-down.svg");
         background-size: contain;
         background-repeat: no-repeat;
         position: absolute;
         height: 100%;
         width: 32px;
         right: 10px;
         top: 5px;
         transition: all 0.4s;
      }

      .select-box .options-container.active {
         max-height: 500px;
         opacity: 1;
         overflow-y: scroll;
         z-index: 1;
      }

      .select-box .options-container.active+.selected::after {
         transform: rotateX(180deg);
         top: -6px;
      }

      .select-box .options-container::-webkit-scrollbar {
         width: 8px;
         background: #0d141f;
         border-radius: 0 8px 8px 0;
      }

      .select-box .options-container::-webkit-scrollbar-thumb {
         background: #525861;
         border-radius: 0 8px 8px 0;
      }

      .select-box .option,
      .selected {
         padding: 5px 10px;
         cursor: pointer;
      }

      .select-box .option:hover {
         background: #414b57;
      }

      .select-box label {
         cursor: pointer;
      }

      .select-box .option .radio {
         color: #525861;
      }

      .button_cost {
         position: relative;
         display: inline-block;
         font-size: 90%;
         font-weight: 700;
         color: rgb(209, 209, 217);
         text-decoration: none;
         text-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
         padding: 0.5em 1em;
         outline: none;
         border-radius: 3px;
         background: linear-gradient(rgb(220, 207, 113), rgb(194, 174, 48)) rgb(220, 207, 113);
         box-shadow: 0 1px rgba(255, 255, 255, 0.2) inset, 0 3px 5px rgba(0, 1, 6, 0.5), 0 0 1px 1px rgba(0, 1, 6, 0.2);
         transition: 0.2s ease-in-out;
         cursor: pointer;
         width: 100%;
      }

      .button_cost:active {
         top: 1px;
         box-shadow: 0 0 1px rgba(0, 0, 0, 0.5) inset, 0 2px 3px rgba(0, 0, 0, 0.5) inset, 0 1px 1px rgba(255, 255, 255, 0.1);
      }

      .button_cost input {
         cursor: pointer;
         position: absolute;
         opacity: 0;
         display: block;
         height: 0;
         width: 0;
      }

<form>
<button type="reset" class="reset">Сброс</button>

      <div class="select-box">
         <div class="options-container">
            <div class="option">
               <label for="all" class="button_cost">
                  <input type="radio" class="radio" value="" id="all" name="val1" /> All 1</label>
            </div>

            <div class="option">
               <label for="film" class="button_cost">
                  <input type="radio" class="radio" value=".pink" id="film" name="category2" /> Film</label>
            </div>

            <div class="option">
               <label for="science" class="button_cost">
                  <input type="radio" class="radio" value=".blue" id="science" name="category" /> Technology</label>
            </div>
         </div>
         <div class="selected"> All 1 </div>
      </div>

      <br><br><br><br><br><br><br><br>

      <div class="select-box">
         <div class="options-container">
            <div class="option">
               <label for="all2" class="button_cost">
                  <input type="radio" class="radio" value="" id="all2" name="val2" /> All 2</label>
            </div>

            <div class="option">
               <label for="film2" class="button_cost">
                  <input type="radio" class="radio" value=".iii" id="film2" name="category2" /> Animation</label>
            </div>

            <div class="option">
               <label for="science2" class="button_cost">
                  <input type="radio" class="radio" value=".uuu" id="science2" name="category2" /> Science
                  Technology</label>
            </div>
         </div>
         <div class="selected"> All 2</div>
      </div>
   </form>

const selectedAll = document.querySelectorAll(".selected");

      selectedAll.forEach(selected => {
         const optionsContainer = selected.previousElementSibling;
         const optionsList = optionsContainer.querySelectorAll(".option");

         selected.addEventListener("click", (e) => {
            e.stopPropagation();
            if (optionsContainer.classList.contains("active")) {
               optionsContainer.classList.remove("active");
            } else {
               let currentActive = document.querySelector(".options-container.active");
               if (currentActive) {
                  currentActive.classList.remove("active");
               }
               optionsContainer.classList.add("active");
            }
            if (optionsContainer.classList.contains("active")) {
            }
         });

         document.addEventListener('click', function (e) {
            if (e.target !== optionsContainer) {
               optionsContainer.classList.remove("active");
            }
         })
         optionsList.forEach(o => {
            o.addEventListener("click", () => {
               selected.innerHTML = o.querySelector("label").innerHTML;
               optionsContainer.classList.remove("active");
            });
         });
      });