滑动以选择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答案和this答案 。

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

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

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