radio checkbox的点击事件怎样实现
时间: 2024-01-17 18:15:15 浏览: 47
在前端开发中,可以通过以下方式实现 radio checkbox 的点击事件:
1. 使用原生 JavaScript 的方式:
- radio 点击事件
```html
<input type="radio" name="gender" value="male" onclick="handleClick(this)">
<input type="radio" name="gender" value="female" onclick="handleClick(this)">
<script>
function handleClick(elem) {
console.log(elem.value);
}
</script>
```
- checkbox 点击事件
```html
<input type="checkbox" name="hobby" value="reading" onclick="handleClick(this)">阅读
<input type="checkbox" name="hobby" value="music" onclick="handleClick(this)">音乐
<script>
function handleClick(elem) {
console.log(elem.value + ' ' + elem.checked);
}
</script>
```
2. 使用 jQuery 的方式:
- radio 点击事件
```html
<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">
<script>
$("input[name='gender']").on("click", function() {
console.log($(this).val());
});
</script>
```
- checkbox 点击事件
```html
<input type="checkbox" name="hobby" value="reading">阅读
<input type="checkbox" name="hobby" value="music">音乐
<script>
$("input[name='hobby']").on("click", function() {
console.log($(this).val() + ' ' + $(this).prop("checked"));
});
</script>
```
通过这些方式,我们可以实现 radio 和 checkbox 的点击事件,并在点击时执行相应的操作。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)