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/

如果这有帮助，请告诉我，否则我很乐意删除此帖。

希望它能有所帮助。

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

<强>码

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

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

Answer 3

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

您可以查看实时示例here。

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

修改here是一种非理想的解决方案。

滑动以选择Web浏览器中的复选框

3 个答案: