如何使多个单选按钮组选中[关闭]答案

【问题标题】：How to make multiple radio button group checked [closed]如何使多个单选按钮组选中[关闭]
【发布时间】：2021-07-20 06:23:45
【问题描述】：

小提琴：https://jsfiddle.net/hvz2nky7/

CSS：

.radio-tile-group {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    justify-content: center;
}
.radio-tile-group .input-container {
    position: relative;
    height: 3rem;
    width: 7rem;
    margin: 0.5rem;
}
.radio-tile-group .input-container .radio-button {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    cursor: pointer;
}
.radio-tile-group .input-container .radio-tile {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 2px solid #000;
    border-radius: 30px;
    padding: 1rem;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.radio-tile-group .input-container .radio-tile-label {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #000;
}
.radio-tile-group .input-container .radio-button:checked ~ .radio-tile {
    background-color: #000;
    border: 2px solid #000;
    color: #fff;
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
}
.radio-tile-group .input-container .radio-button:checked ~ .radio-tile .radio-tile-label {
    color: #fff;
    background-color: #000;
}

代码只检查最后一个收音机...我如何修改才能单独检查每个组？

【问题讨论】：

寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。

标签： css css-selectors radio-button

【解决方案1】：

单选按钮按name 属性分组。

<input type="radio" name="group1" id="r1">
<label for="r1">daily</label>
<input type="radio" name="group1" id="r2">
<label for="r2">monthly</label>

<br>

<input type="radio" name="group2" id="r3">
<label for="r3">daily</label>
<input type="radio" name="group2" id="r4">
<label for="r4">monthly</label>

<br>

<input type="radio" name="group3" id="r5">
<label for="r5">daily</label>
<input type="radio" name="group3" id="r6">
<label for="r6">monthly</label>

【讨论】：

【解决方案2】：

单选按钮允许用户在多个选项中选择一个选项。因此，如果您想选择多个选项，最好使用复选框而不是单选按钮，这样您可以同时选择多个选项

【讨论】：

不，它们被放置在页面的不同部分。