html的radio开关

HTML的radio是一种用于创建单选按钮的元素。它允许用户在一组选项中选择一个选项。

以下是一个使用radio的示例代码：

<form>
  <input type="radio" id="option1" name="radioGroup" value="option1">
  <label for="option1">Option 1</label><br>
  <input type="radio" id="option2" name="radioGroup" value="option2">
  <label for="option2">Option 

相关问题

html radio开关样式挑选性别

你可以使用以下代码来创建一个性别选择的开关样式：

HTML代码：

<div class="gender-switch">
  <input type="radio" id="male" name="gender" value="male" checked>
  <label for="male">男</label>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">女</label>
</div>

CSS代码：

.gender-switch {
  display: inline-block;
  margin: 10px;
  font-size: 16px;
}

.gender-switch input[type="radio"] {
  display: none;
}

.gender-switch label {
  display: block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 8px;
  cursor: pointer;
}

.gender-switch label:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #ccc;
}

.gender-switch input[type="radio"]:checked + label:before {
  background: #007bff;
  border-color: #007bff;
}

.gender-switch label:after {
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  left: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
}

.gender-switch input[type="radio"]:checked + label:after {
  left: 15px;
}

你可以在CSS代码中更改颜色和大小来适应你的设计需求。

html radio开关样式挑选性别js控制sex的值

可以使用以下代码实现：

HTML部分（注意radio的value值与js中的sex值对应）：

<label for="male">Male</label>
<input type="radio" id="male" name="gender" value="male" onclick="setSex(this.value)">
<label for="female">Female</label>
<input type="radio" id="female" name="gender" value="female" onclick="setSex(this.value)">

JS部分：

let sex = ""; // 初始化sex

function setSex(value) {
  sex = value; // 设置sex的值
}

这样，当用户点击Male或Female时，js中的sex值就会被设置为对应的值。