如何制作类似于输入类型单选按钮的div html标签？

Question

我正在尝试制作一个像单选按钮一样的div按钮。

它目前就像一个复选框。如何使它像输入（单选型）标签一样工作？

这是类似于复选框的代码

    .gender {
        display: inline-block;
        line-height: 32px;
        margin: 4px;
        padding-left: 32px;
        background: left no-repeat url('https://icons-for-free.com/iconfiles/png/512/radio+button+unchecked+24px-131987943262195581.png');
        background-size: 24px;
        cursor: pointer;
    }

    .gender.checked {
        background-image: url("https://cdn2.iconfinder.com/data/icons/interface-vol-3-1/16/radio-button-on-checked--round-circle-512.png");
    }

<div style="text-align: left">
    <div class="gender checked" onclick="this.classList.toggle('checked')">
        Unspecified
    </div>
    <br>
    <div class="gender" onclick="this.classList.toggle('checked')">
        Male
    </div>
    <br>
    <div class="gender" onclick="this.classList.toggle('checked')">
        Female
    </div>
</div>

我正在尝试使其像单选按钮一样工作

Answer 1

如果您可以更改一些html，那么可以尝试一下。

<input type="radio" name="gender" id="unspecified" />
<label for="unspecified" class="gender">
    Unspecified
</label>

然后我们可以设置“ false”单选，如下所示：

input[type="radio"]:checked+.gender {
  background-image: url("https://cdn2.iconfinder.com/data/icons/interface-vol-3-1/16/radio-button-on-checked--round-circle-512.png");
}

Demo

.gender {
  display: inline-block;
  line-height: 32px;
  margin: 4px;
  padding-left: 32px;
  background: left no-repeat url('https://icons-for-free.com/iconfiles/png/512/radio+button+unchecked+24px-131987943262195581.png');
  background-size: 24px;
  cursor: pointer;
}

.gender.checked {
  background-image: url("https://cdn2.iconfinder.com/data/icons/interface-vol-3-1/16/radio-button-on-checked--round-circle-512.png");
}

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

input[type="radio"]:checked+.gender {
  background-image: url("https://cdn2.iconfinder.com/data/icons/interface-vol-3-1/16/radio-button-on-checked--round-circle-512.png");
}

<div style="text-align: left">
  <input type="radio" name="gender" id="unspecified" />
  <label for="unspecified" class="gender">
      Unspecified
  </label>
  <br>
  <input type="radio" name="gender" id="Male" />
  <label for="Male" class="gender">
      Male
  </label>
  <br>
  <input type="radio" name="gender" id="Female" />
  <label for="Female" class="gender">
      Female
  </label>
</div>