li里面包含一个radio的input,点击li,li里面的input将被选中
时间: 2024-04-29 12:23:40 浏览: 44
需要使用JavaScript来实现此功能。具体实现步骤如下:
1. 给li元素添加一个点击事件的监听器。
2. 在监听器中获取li元素内的radio input元素。
3. 将radio input元素的checked属性设置为true,即将其选中。
以下是具体的代码实现:
HTML代码:
```
<ul>
<li>
<input type="radio" name="option" value="1">
Option 1
</li>
<li>
<input type="radio" name="option" value="2">
Option 2
</li>
<li>
<input type="radio" name="option" value="3">
Option 3
</li>
</ul>
```
JavaScript代码:
```
var liList = document.querySelectorAll('li');
for (var i = 0; i < liList.length; i++) {
liList[i].addEventListener('click', function() {
var radioInput = this.querySelector('input[type="radio"]');
radioInput.checked = true;
});
}
```
在上面的代码中,我们首先获取了所有的li元素,然后使用一个for循环为每个li元素添加了一个点击事件的监听器。在监听器中,我们通过querySelector方法获取了li元素内的radio input元素,并将其checked属性设置为true,实现了选中的效果。
阅读全文