可以通过以下两种方式实现:
1. 使用label标签与input标签配合:
HTML代码:
```
```
CSS样式:
```
label {
display: block;
cursor: pointer;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked + label {
font-weight: bold;
}
```
在label标签包裹checkbox,设置label的display为block,cursor为pointer,这样就可以让鼠标显示为手形,具有点击效果。然后通过CSS设置checkbox的display为none,这样就可以隐藏checkbox,接着在label后面写上相应的文本内容,就可以实现点击文本选中checkbox。最后通过CSS设置选中的效果,这里设置了字体加粗。
2. 使用JavaScript实现:
HTML代码:
```
```
CSS样式:
```
label {
display: inline-block;
cursor: pointer;
}
```
这里使用label的for属性与checkbox的id属性配合,使得点击label就会选中checkbox。同时在label中添加onclick事件,调用JavaScript函数执行点击操作。最后通过CSS设置label的display为inline-block,使其与checkbox在同一行。
全部评论: 0 条