Question

我有一个男女单选按钮。

我需要在下面的问题上提供帮助。

我必须显示男性单选按钮应始终处于活动状态。
如何增加尺寸？我试着给一些填充但是在后台解决问题。
如何在其上设置动画？

你能帮助我吗？

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

prs <- unlist(lapply(1:(length(CPC)), 
        function(x) {
          less_or_eq <- CPC[1 : x] <=  CPC[x]
          if(all(less_or_eq))
            return(0)
          inds <- which(less_or_eq == 0)
          return(x - inds[length(inds)])
          } ))

prs
# 0  0  1  0  1  2  3  1  1  2  1  1  1  3  4  6  1  8  1  2  1  2 13
# 14  1  1  1  1  3 4

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是内联级别元素，只需将其设置为阻止，然后根据需要设置填充

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>

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

请注意......

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

资源

作为

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

＆＃13;
＆＃13;
.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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

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" />

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

4 个答案:

1。始终有效

2。大小

3。动画