如何设置一个单选按钮应始终处于活动状态

Question

我有一个男性和女性的单选按钮。

我需要以下问题的帮助。

1. 我必须显示男性单选按钮应该始终处于活动状态。
2. 如何增加尺寸？我试图提供一些填充，但在后台解决了问题。
3. 如何设置一些动画？

你会在这方面帮助我吗？

$('label.option').click(function() {
  $('input[type=radio]').attr('checked',null);
  $('label.option').removeClass("checked");
  $(this).prev().attr('checked',"checked");
  $(this).addClass("checked");
})

.border {
  border:1px solid #000;
  width: 150px;
  border-radius: 30px;
  text-align: center;
  display: flex;
}

.width-half {
  width: 75px;
}

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

.checked {
  background-color: #00a2ff;
  border-radius: 30px;
  display: block;
  color: #fff;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="border">
  <div class="width-half">
    <input type="radio" name="gender" value="male">
    <label class="option">Male</label>
  </div>
  <div class="width-half">
    <input type="radio" name="gender" value="female">
    <label class="option">Female</label>
  </div>
</div>

Answer 1

1。始终活跃

只需将您的输入属性设置为选中

<input type="radio" name="gender" value="male" checked>

然后将与处于选中状态的输入相邻的同级标签作为目标，如下所示

input[type=radio]:checked + label {
    background-color: #00a2ff;
    border-radius: 30px;
    display: block;
    color: #fff;
}

2。尺寸

标签是内联级元素，只需将其设置为块，然后根据需要设置填充

label {
    display: block;
    padding: 5px;
}

3。动画

取决于您想要制作什么动画，但只需将过渡设置为 all 就可以了。

label {
    transition: all 300ms ;
}

Answer 2

可以使用checked属性，并为label的样式添加一个额外的选择器才能生效：

• 将属性checked 添加到radio 男性

<input type="radio" name="gender" value="male" checked>

• 然后更新 CSS 选择器添加到类选择器:checked +label

.checked, :checked +label{
    background-color: #00a2ff;
    border-radius: 30px;
    display: block;
    color: #fff;
}

$('label.option').click(function(){
    $('input[type=radio]').attr('checked',null);
    $('label.option').removeClass("checked");
    $(this).prev().attr('checked',"checked");
    $(this).addClass("checked");
})

.border{
    border:1px solid #000;
    width: 150px;
    border-radius: 30px;
    text-align: center;
    display: flex;
}
.width-half{
    width: 75px;
}
input[type=radio]
{
    display: none;
}
.checked, :checked +label{
    background-color: #00a2ff;
    border-radius: 30px;
    display: block;
    color: #fff;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="border">
    <div class="width-half">
        <input type="radio" name="gender" value="male" checked>
        <label class="option">Male</label>
    </div>
    <div class="width-half">
        <input type="radio" name="gender" value="female">
        <label class="option">Female</label>
    </div>
</div>

---

请注意...

甚至可能不需要Javascript，因为HTML结构与CSS选择器兼容如果 label通过属性for正确链接到它的input。

资源

• https://www.w3.org/TR/WCAG20-TECHS/H44.html

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

为

与标签元素在同一文档中的可标记表单相关元素的 ID。文档中第一个 ID 与 for 属性值匹配的此类元素就是该标签元素的标签控件。

.border {
  border: 1px solid #000;
  width: 150px;
  border-radius: 30px;
  text-align: center;
  display: flex;
}

.width-half {
  width: 75px;
}

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

:checked+label {
  background-color: #00a2ff;
  border-radius: 30px;
  display: block;
  color: #fff;
}

<div class="border">
  <div class="width-half">
    <input type="radio" name="gender" value="male" id="male" checked>
    <label class="option" for="male">Male</label>
  </div>
  <div class="width-half">
    <input type="radio" name="gender" value="female" id="female">
    <label class="option" for="female">Female</label>
  </div>
</div>

Answer 3

使用php，可以通过添加；

<?php $gender = $_POST["gender"]; ?>
<input type="radio" name="gender"
<?php if (isset($gender) && $gender=="female") echo "checked";?>
value="female">Female
<input type="radio" name="gender"
<?php if (isset($gender) && $gender=="male") echo "checked";?>
value="male">Male

并添加css颜色或您想要包含的任何东西，以便用户知道它的活动，您可以创建一个类或ID，将其命名为您想要的任何名称并回显它，即您将拥有这样的东西；

<?php $gender = $_POST["gender"]; ?>
<input type="radio" name="gender"
<?php if (isset($gender) && $gender=="female") echo "checked" echo "id='highlight';?>
value="female">Female
<input type="radio" name="gender"
<?php if (isset($gender) && $gender=="male") echo "checked" echo "id='highlight';?>
value="male">Male

Answer 4

您可以使用单选按钮选中属性来默认选中它，

<input type="radio" name="" value="male" checked="checked" />