提问人：Mysterius 提问时间：11/15/2023 最后编辑：Mysterius 更新时间：11/15/2023 访问量：53
如何使<标签>文本启用或禁用<输入>范围？
How to make a <label> text enable or disable an <input> range?
问：
我希望在单击标签时范围自行切换（最小/最大）。 仅使用HTML或CSS可以吗？我需要一些JS吗？
我有以下代码：
<label>
This is the label text
<input type="range" min="0" max="1" step="0.01" value="1" />
</label>
答：
-1赞
Daniel Muñoz Gallardo
11/15/2023
#1
你需要使用 js。
试试这段代码。
document.addEventListener('DOMContentLoaded', function() {
var label = document.querySelector('label');
var rangeInput = document.querySelector('input[type="range"]');
label.addEventListener('click', function() {
// Toggle between min and max values
if (rangeInput.getAttribute('min') === '0') {
rangeInput.setAttribute('min', '1');
rangeInput.setAttribute('max', '100');
} else {
rangeInput.setAttribute('min', '0');
rangeInput.setAttribute('max', '1');
}
});
});
评论
0赞
Mysterius
11/15/2023
谢谢你的回答，但我想我的问题不是很清楚。我不想更改最小值和最大值，我希望该值在单击标签时在最小值和最大值之间切换。使用您的代码作为基础，这是有效的方法：jsfiddle.net/v1ausztf
0赞
Daniel Muñoz Gallardo
11/15/2023
尝试新答案:)中的新代码
-1赞
Daniel Muñoz Gallardo
11/15/2023
#2
- 删除 step 属性
<label>
This is the label text
<input type="range" min="0" max="1" step="0.01" value="1" />
</label>
- 试试这个新的js代码
document.addEventListener('DOMContentLoaded', function() {
var label = document.querySelector('label');
var rangeInput = document.querySelector('input[type="range"]');
label.addEventListener('click', function() {
// Toggle between min and max values
if (rangeInput.value > rangeInput.max) {
rangeInput.value = rangeInput.min;
} else {
rangeInput.value = rangeInput.max;
}
});
});
- 在此处实现 https://jsfiddle.net/tzko8hse/3（单击会将值更改为标签上定义的最大值或最小值。
评论