html 单选框打勾
时间: 2023-11-08 17:03:42 浏览: 101
要在 HTML 中为单选框打勾,可以使用 checked 属性。将 checked 属性设置为 true 或者 checked 即可选中该单选框。下面是一个示例:
```html
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
```
在上面的示例中,第一个单选框被默认选中,因为它的 checked 属性被设置为 true。
相关问题
微信小程序 单选框 打勾 代码
以下是一个简单的微信小程序单选框示例,当用户勾选选项时,会在控制台输出对应的值:
```html
<view class="radio-group">
<label class="radio" bindtap="radioChange" data-value="option1">
<view class="radio__icon"></view>
<view class="radio__label">选项1</view>
</label>
<label class="radio" bindtap="radioChange" data-value="option2">
<view class="radio__icon"></view>
<view class="radio__label">选项2</view>
</label>
<label class="radio" bindtap="radioChange" data-value="option3">
<view class="radio__icon"></view>
<view class="radio__label">选项3</view>
</label>
</view>
```
```css
.radio-group {
display: flex;
flex-direction: column;
}
.radio {
display: flex;
align-items: center;
margin-bottom: 12px;
}
.radio__icon {
width: 18px;
height: 18px;
border: 1px solid #999;
border-radius: 50%;
margin-right: 8px;
}
.radio__label {
font-size: 16px;
}
.radio__icon.checked {
background-color: #007aff;
border-color: #007aff;
}
```
```javascript
Page({
data: {
selectedValue: ''
},
radioChange: function(event) {
const value = event.currentTarget.dataset.value;
console.log('选中的值为:', value);
this.setData({
selectedValue: value
});
}
});
```
在上面的示例中,我们首先创建了一个包含三个选项的单选框组,每个选项都是一个 `label`,并绑定了 `bindtap` 事件。当用户点击某个选项时,会触发 `radioChange` 函数,该函数会获取选项的值,并将其打印到控制台。我们还定义了一个 `selectedValue` 变量来保存用户选择的值。选项的样式可以根据自己的需求进行修改。
html选择框打勾代码单选
以下是一个简单的 HTML 单选框示例代码:
```html
<form>
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
```
如果要将单选框框选中,可以在 input 标签中添加 checked 属性。例如,如果要默认选中“男性”选项,可以将代码修改为:
```html
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
```
在这个示例中,需要注意以下几点:
- 所有单选框的 name 属性都设置为“gender”,这样它们才能组成一个单选框组。
- 每个单选框的 value 属性分别设置为“male”、“female”和“other”,这些值将被提交到服务器端。
- 第一个单选框(男性选项)添加了 checked 属性,这样它将默认选中。
阅读全文