“检查”带有Click&的多个复选框拖动? [英] "Check" Multiple Checkboxes With Click & Drag?
问题描述
我有一张桌子,上面满是这样的复选框:
I have a table filled with checkboxes like so:
我希望能够按住鼠标并拖动以激活多个复选框。我没有丝毫线索从哪里开始:/我搜寻了答案,但只找到另一个线程,有人问该怎么做,但没有答案。
I'd like to be able to keep my mouse held down and drag to activate multiple checkboxes. I don't have the slightest clue where to start with this :/ I searched for an answer, but only found another thread of someone asking how to do it, but with no answers.
HTML:
<table>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>
<!-- Repeat tr 2x -->
</tbody>
</table>
jsFiddle:
https://jsfiddle.net/CSS_Apprentice/ge1zx2yg/
我也是宁愿保留< input type = checkbox>
模型,因为返工我的系统会很费时,但是如果不这样做,我会接受其他选择不可能
Also, I'd prefer to keep the <input type="checkbox">
model because reworking my system would be time consuming, but I'm open to other options if this isn't possible. Any help will be greatly appreciated!
推荐答案
<table>
<tbody>
<tr>
<td><input id=1 onmouseover='check(1)' type="checkbox"></td>
<td><input id=2 onmouseover='check(2)' type="checkbox"></td>
<td><input id=3 onmouseover='check(3)' type="checkbox"></td>
</tr>
<tr>
<td><input id=4 onmouseover='check(4)' type="checkbox"></td>
<td><input id=5 onmouseover='check(5)' type="checkbox"></td>
<td><input id=6 onmouseover='check(6)' type="checkbox"></td>
</tr>
<tr>
<td><input id=7 onmouseover='check(7)' type="checkbox"></td>
<td><input id=8 onmouseover='check(8)' type="checkbox"></td>
<td><input id=9 onmouseover='check(9)' type="checkbox"></td>
</tr>
</tbody>
</table>
<script>
function check(id)
{
if(mouseDown)
{
document.getElementById(id).checked = 1-document.getElementById(id).checked;
// document.getElementById(id).checked = true;
// ^ If you only want to turn them on, use this.
}
}
var mouseDown = 0;
document.body.onmousedown = function()
{
++mouseDown;
}
document.body.onmouseup = function()
{
--mouseDown;
}
// Credit to http://stackoverflow.com/questions/322378/javascript-check-if-mouse-button-down
</script>
或者,也可以使用下面的代码来避免ID:
Or, alternatively, use the code beneath to avoid IDs:
<table>
<tbody>
<tr>
<td><input onmouseover='check(this)' type="checkbox"></td>
<td><input onmouseover='check(this)' type="checkbox"></td>
<td><input onmouseover='check(this)' type="checkbox"></td>
</tr>
<tr>
<td><input onmouseover='check(this)' type="checkbox"></td>
<td><input onmouseover='check(this)' type="checkbox"></td>
<td><input onmouseover='check(this)' type="checkbox"></td>
</tr>
<tr>
<td><input onmouseover='check(this)' type="checkbox"></td>
<td><input onmouseover='check(this)' type="checkbox"></td>
<td><input onmouseover='check(this)' type="checkbox"></td>
</tr>
</tbody>
</table>
<script>
function check(box)
{
if(mouseDown)
{
box.checked = 1-box.checked;
// box.checked = 1;
// ^ If you only want to turn them on, use this.
}
}
var mouseDown = 0;
document.body.onmousedown = function()
{++mouseDown;}
document.body.onmouseup = function()
{--mouseDown;}
// Credit to http://stackoverflow.com/questions/322378/javascript-check-if-mouse-button-down
</script>
这篇关于“检查”带有Click&的多个复选框拖动?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!