li里面包含一个radio的input,点击li,li里面的input将被选中
时间: 2024-04-29 20:23:40 浏览: 11
需要使用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,实现了选中的效果。
相关推荐
![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)
添加
修改
删除
手动运行数据更新器 选中 时间 总居民消费CPI 食品类CPI 衣着类CPI 居住类CPI 服务类CPI 交通通信类CPI 教育类CPI 医药类CPI 其他类CPI <c:forEach items="${cpi}" var="i"> <input name="radiobox" type="radio" value=${i.TIMES}/> <c:if test="${i.TIMES==999999}"> 预测本月 </c:if> <c:if test="${i.TIMES!=999999}"> ${i.TIMES} </c:if> ${i.CPI} ${i.FOOD} ${i.CLOTH} ${i.RESIDE} ${i.SERVICE} ${i.TRANS} ${i.EDU} ${i.MEDIC} ${i.OTHER} </c:forEach> 我希望页面在点击修改和删除的时候把单选框的value提交给服务器,我应该怎么改
![](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)