html的input的checkbox,希望点击旁边的文本,选中checkbox

bluesky1年前 ⋅ 1218 阅读
可以通过以下两种方式实现:

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

    相关推荐