我想创建 html 按钮,并将输入单选类型插入到按钮中。当单击按钮时,将检查输入 radio 类型。我使用了这段代码,但每当我单击按钮时,输入单选按钮都不会被选中。我该如何让它工作?:
<button class="button">
<input type="radio" name="input" id="choice-1" value="0">Chlorophyll
</button>
document.querySelector('.button').addEventListener('click', function(){
document.querySelector('#choice-1').checked;
});
最佳答案
Interactive Elements
交互元素中的交互元素将不再充当交互元素。
HTML
以下演示使用 <label>
作为同步到 <input type="checkbox">
的按钮通过使用for attribute 和 <input>
#id
因为它的值(value)。
JavaScript
详细信息在下面的演示中注释,以下列表提供了演示中有关 JavaScript 的引用:
-
演示
演示中评论了详细信息
// Reference the <form>
var ui = document.forms['ui'];
// Register change event on <form>
ui.addEventListener('change', chx);
function chx(e) {
// Reference <output>
var out = ui.out;
// Reference clicked element
var tgt = e.target;
// if clicked element is NOT element registered to event
if (tgt !== e.currentTarget) {
// Set <output> to display the #id and value of checked
out.value = `ID: ${tgt.id} | Value: ${tgt.value}`;
}
}
html,
body {
font: 700 small-caps 16px/1.5 Consolas;
}
form * {
font: inherit
}
label {
letter-spacing: 2px;
display: inline-block;
padding: 1px 5px;
color: gold;
border: 3px ridge gold;
border-radius: 8px;
background: rgba(0, 0, 0, 0.6);
user-select: none;
cursor: pointer;
width: 110px;
}
[type=radio] {
transform: translateY(2.5px);
}
#out {
display: block;
text-align: center;
color: tomato;
}
<form id='ui'>
<label for='rad0'>Radio 1
<input id='rad0' name='rad' type='radio' value='0'>
</label>
<label for='rad1'>Radio 2
<input id='rad1' name='rad' type='radio' value='1'>
</label>
<label for='rad2'>Radio 3
<input id='rad2' name='rad' type='radio' value='2'>
</label><br><br>
<output id='out'></output>
</form>
关于javascript - 插入了输入单选类型的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52780183/