可以使用document.getElementsByName来实现html实现鼠标选择单选,日志实时输出value值
时间: 2024-01-24 22:17:10 浏览: 38
可以使用以下代码实现:
HTML代码:
```html
<p>请选择一个选项:</p>
<input type="radio" name="option" value="1">选项1<br>
<input type="radio" name="option" value="2">选项2<br>
<input type="radio" name="option" value="3">选项3<br>
```
JavaScript代码:
```javascript
const radios = document.getElementsByName('option');
radios.forEach((radio) => {
radio.addEventListener('click', () => {
console.log(`当前选择的选项是:${radio.value}`);
});
});
```
上述代码中,我们首先通过`document.getElementsByName('option')`获取了所有name属性为'option'的单选框,并使用forEach方法遍历每个单选框。
然后,我们给每个单选框添加了一个点击事件,当用户点击单选框时,控制台会输出当前选中的单选框的value值。
相关问题
怎么用js实现html 单选框实现选择计算分值
可以使用以下代码实现:
HTML代码:
```
<input type="radio" name="score" value="10">10分
<input type="radio" name="score" value="20">20分
<input type="radio" name="score" value="30">30分
```
JavaScript代码:
```
var radios = document.getElementsByName('score');
var score = 0;
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
score = parseInt(radios[i].value);
break;
}
}
console.log('分数为:' + score);
```
这段代码首先获取所有name为score的单选框,然后遍历这些单选框,如果某个单选框被选中,则将其value值转换为整数并赋值给score变量。最后输出分数。
使用js实现一个tree树形单选组件
好的,以下是一个使用 JavaScript 实现的 tree 树形单选组件的示例代码:
HTML:
```html
<div id="tree"></div>
```
JS:
```javascript
// 树形数据
const treeData = [
{
id: '1',
label: '节点1',
children: [
{
id: '1-1',
label: '节点1-1',
children: [
{
id: '1-1-1',
label: '节点1-1-1'
},
{
id: '1-1-2',
label: '节点1-1-2'
}
]
},
{
id: '1-2',
label: '节点1-2'
}
]
},
{
id: '2',
label: '节点2'
}
]
// 递归生成树形节点
function createTreeNode(data) {
const ul = document.createElement('ul')
for (let i = 0; i < data.length; i++) {
const li = document.createElement('li')
const label = document.createElement('label')
const checkbox = document.createElement('input')
checkbox.type = 'checkbox'
checkbox.name = 'tree-node'
checkbox.value = data[i].id
label.appendChild(checkbox)
label.appendChild(document.createTextNode(data[i].label))
li.appendChild(label)
if (data[i].children && data[i].children.length) {
li.appendChild(createTreeNode(data[i].children))
}
ul.appendChild(li)
}
return ul
}
// 获取选中的节点
function getSelectedNode() {
const nodeList = document.getElementsByName('tree-node')
for (let i = 0; i < nodeList.length; i++) {
if (nodeList[i].checked) {
return nodeList[i].value
}
}
return null
}
// 渲染树形组件
function renderTree() {
const tree = document.getElementById('tree')
tree.appendChild(createTreeNode(treeData))
tree.addEventListener('click', function (event) {
const target = event.target
if (target.nodeName === 'INPUT' && target.type === 'checkbox') {
const nodeList = document.getElementsByName('tree-node')
for (let i = 0; i < nodeList.length; i++) {
if (nodeList[i] !== target) {
nodeList[i].checked = false
}
}
}
})
}
renderTree()
```
这段代码会渲染一个树形节点,并且支持单选功能。每个节点都有一个复选框,选中一个节点时,会取消其他节点的选中状态。你可以根据自己的需求修改代码,实现更加复杂的功能。
相关推荐
![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)