jquery - 如何制作像输入类型单选按钮一样工作的 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>

然后我们可以像这样设置要检查的“假”单选:

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");
}

演示

.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>