jquery - 在 Web 浏览器中滑动以选中复选框

Question

有时我们的表单在表格列中有很多复选框。用户必须检查一堆（但不是全部）。

通常我认为，如果您可以单击并拖动复选框，只需轻扫一下即可选择您想要的复选框。

我以前没有见过这个实现。有人对这样的东西的可用性有意见吗？

有没有人见过可以启用此功能的 jquery 插件？

Answer 1

这是我的答案，这归功于 Trufa 和 Tats 让球滚动：http: //jsfiddle.net/ebStc/7/

这是一个插件：

$.fn.swipeable = function() {

var mousedownOn = {
        id: '',
        checkState: false
    };

$(document)
    .mouseup(function() {
        mousedownOn.id = '';
    });

$(this)
    .filter(':checkbox')
    .mousedown(function() {
        var $this = $(this);
        mousedownOn.id = $this.attr('id');
        mousedownOn.checkState = $this.prop('checked');
        $this.prop('checked',!$this.prop('checked'));
        $this.change();
    })
    .mouseenter(function() {
        var $this = $(this);

        if (mousedownOn.id != '' && mousedownOn.id != $this.attr('id')){
            $this.prop('checked',!mousedownOn.checkState);
            $this.change();
        }
    })
    .click(function(e) {
        e.preventDefault();
        return false;
    });
};

Answer 2

喜欢这个人吗？http://jsfiddle.net/ebStc/3/ 或 http://jsfiddle.net/ebStc/2/

如果这有帮助，请告诉我，或者我很乐意删除这篇文章。

希望对事业有所帮助。

当您拖动鼠标指针时，它将被选中，如果再次拖动，它将取消选择:)

代码

$('input[type="checkbox"]').mouseenter(function() {

    if ($(this).is(':checked')) {
        $(this).prop('checked',false);
    } else {
         $(this).prop('checked',true);
    }
});​

Answer 3

免责声明：这是未完成的工作，它基于Tats 答案和这个答案。

您可以在此处查看实时示例。

它认为这是 OP 想要的，但还没有弄清楚为什么当你按下鼠标时它实际上没有检查第一个复选框，但它接近 OP 正在寻找的鼠标拖动效果。

在这里编辑是一个不理想的解决方案。