jquery - 如何制作像输入类型单选按钮一样工作的 div html 标签?
问题描述
我正在尝试制作一个类似于单选按钮的 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>
我试图让它像一个单选按钮
解决方案
如果您对更改一些 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");
}
演示
.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>
推荐阅读
- python - 如何为仅单个模块的库深处的monkeypatch方法?
- vue.js - 在 Vue 3 中安装 Jest 会在 Linux 上为 deasync 提供错误“无法找到绑定文件”
- python - PyQt6(没有pyrcc)如何提供资源?
- html - Materialize CSS - 如何使列具有全高?
- angular - 在选项卡中显示徽章计数器
- react-table - 具有多个值的反应表分组表列
- javascript - 按“上周”、“上个月”和“去年”过滤时间戳数组
- yarnpkg - 纱线构建。错误 - 无效的选项对象
- macos - 共享 dmg 文件,收件人无需执行 xattr -d
- java - 使用 YamlMapFactoryBean 通过 PropertySourceFactory 在 Spring Boot 中读取 YAML 属性文件