主页 / 问题 / 1597091
Accepted
4C697361
Asked:2024-10-18 16:24:16 +0000 UTC2024-10-18 16:24:16 +0000 UTC

如何为多个单选按钮设置默认值？

  • 772

我正在制作几个单选按钮来控制对象。默认情况下，每个都应处于模式 A 中。每个都在所需位置写入checked，它们也位于单独的容器中，但只有顶部的设置了默认值。 HTML 和 CSS 之间可能存在一些冲突，如何解决？

按钮代码：

fieldset {
  position: fixed;
  display: flex;
  justify-content: space-around;
  border: 0;
  text-align: center;
}

#oneSwitchBtn {
  margin-top: 5%;
}

#twoSwitchBtn {
  margin-top: 15%;
}

label {
  display: inline-block;
  position: relative;
  width: 3rem;
  padding-bottom: 2.5rem;
  z-index: 2;
  cursor: pointer;
  font-family: 'Inter-bold';
  color: #30d5c8;
}

label:first-of-type {
  z-index: 1;
}

input {
  position: absolute;
  top: 0;
  height: 100%;
  width: 20%;
  appearance: none;
  background: none;
  opacity: 0.000001;
}


/* focus styles ======*/

input:focus+label {
  text-decoration: underline;
}

fieldset:focus-within label:first-of-type::before {
  box-shadow: 0 0 0 2px white, 0 0 0 4px grey;
}


/* toggle background =========== */

label:first-of-type::before {
  content: '';
  position: absolute;
  width: 8rem;
  height: 2rem;
  bottom: 0;
  left: 0.5rem;
  background-color: grey;
  border-radius: 0.95rem;
}


/* toggle knob (thumb?) ========= */

label:last-of-type::after {
  content: '';
  position: absolute;
  height: 1.5rem;
  width: 1.5rem;
  background-color: black;
  border-radius: 50%;
  bottom: 0.25rem;
  right: 0.75rem;
  transition: transform 0.3s ease;
}

input:first-of-type:checked~label:last-of-type::after {
  transform: translateX(-6rem);
  background-color: rgb(22, 192, 73);
}

input:nth-of-type(2):checked~label:last-of-type::after {
  transform: translateX(-3rem);
  background-color: rgb(70, 70, 70);
}

input:last-of-type:checked~label:last-of-type::after {
  transform: translateX(0);
  background-color: red;
}


/* end of toggle ================== */
<fieldset id="oneSwitchBtn">
  <input name="state" value="on" id="none0" type="radio">
  <label for="none0"> 0 </label>
  <input name="state" value="auto" id="none01" type="radio" checked>
  <label for="none01">A</label>
  <input name="state" value="off" id="none02" type="radio">
  <label for="none02"> 1 </label>
</fieldset>

<fieldset id="twoSwitchBtn">
  <input name="state" value="on" id="none1" type="radio">
  <label for="none1"> 0 </label>
  <input name="state" value="auto" id="none2" type="radio" checked>
  <label for="none2">A</label>
  <input name="state" value="off" id="none3" type="radio">
  <label for="none3"> 1 </label>
</fieldset>

html

1 个回答

  1. Best Answer

    这都是关于属性的name，对于两个组来说是相同的。为了让每组单选按钮独立工作，需要name为每组单选按钮设置唯一的属性值

    <fieldset id="oneSwitchBtn">
  <input name="state1" value="on" id="none0" type="radio">
  <label for="none0"> 0 </label>
  <input name="state1" value="auto" id="none01" type="radio" checked>
  <label for="none01">A</label>
  <input name="state1" value="off" id="none02" type="radio">
  <label for="none02"> 1 </label>
</fieldset>

<fieldset id="twoSwitchBtn">
  <input name="state2" value="on" id="none1" type="radio">
  <label for="none1"> 0 </label>
  <input name="state2" value="auto" id="none2" type="radio" checked>
  <label for="none2">A</label>
  <input name="state2" value="off" id="none3" type="radio">
  <label for="none3"> 1 </label>
</fieldset>

    通过为组中的每个单选按钮分配相同的名称属性值来定义一组单选按钮。创建一组单选按钮后，选择该组中的任何单选按钮都会自动取消选择同一组中已选择的单选按钮。页面上可以有任意多组单选按钮，只要每组都有唯一的名称属性值[更多]

    • 2

相关问题