jquery - 如何设置一个单选按钮应该始终处于事件状态

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是行内级元素，直接设置为block，然后padding随意设置

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

3。动画

取决于您想为什么设置动画，但只需将过渡设置为全部即可。

label {
    transition: all 300ms ;
}