不要相加这个label
时间: 2023-08-05 11:33:17 浏览: 68
好的,如果你不想要“相加”这个标签,可以将复选框和文本放在同一行,并使用 CSS 样式来控制它们的显示。下面是一个示例代码:
```html
<label for="num1">第一个数:</label>
<input type="number" id="num1"><br><br>
<label for="num2">第二个数:</label>
<input type="number" id="num2"><br><br>
<div style="display: flex; align-items: center;">
<input type="checkbox" id="add">
<span>相加</span>
</div><br>
<label for="result">结果:</label>
<span id="result">0</span><br><br>
<script>
const num1Input = document.getElementById('num1');
const num2Input = document.getElementById('num2');
const addCheckbox = document.getElementById('add');
const resultSpan = document.getElementById('result');
function calculate() {
const num1 = parseFloat(num1Input.value);
const num2 = parseFloat(num2Input.value);
const addChecked = addCheckbox.checked;
let result = 0;
if (addChecked) {
result = num1 + num2;
}
resultSpan.innerText = result;
}
num1Input.addEventListener('input', calculate);
num2Input.addEventListener('input', calculate);
addCheckbox.addEventListener('change', calculate);
</script>
```
这段代码会将复选框和“相加”文本放在同一行,并使用 `display: flex; align-items: center;` 样式来使它们垂直居中对齐。
阅读全文