|
|
|
Drag-through checkboxes
Snippet Menu
2
Wed. May. 6th, 2009 3:37 PM
Essentially, lets your users click a whole line of checkboxes by clicking the first and dragging down the line.
This is a crop-in script. That is to say, include it on your page, and you need do nothing else. Even primitive event handlers (element.onchange, for example) are supported, with no action on your part.
A demo of it in action is on my hosting:
http://fordi.org/test/checks.php
This is the jQuery-compatible version. The libless version will be up soon.
This is a crop-in script. That is to say, include it on your page, and you need do nothing else. Even primitive event handlers (element.onchange, for example) are supported, with no action on your part.
A demo of it in action is on my hosting:
http://fordi.org/test/checks.php
This is the jQuery-compatible version. The libless version will be up soon.
$(function () {
var
name=null,
value=null,
current=null,
orig=null;
$('input[type="checkbox"], input[type="radio"]')
.mousedown(function () {
if (!this.hasAttribute('name')) return;
orig = this;
name = this.getAttribute('name');
var radio = this.getAttribute('type').toLowerCase() == 'radio';
if (radio)
value = true;
else
value = !this.checked;
this.checked = value;
})
.hover(function () {
if (name===null) return;
if (this.getAttribute('name')!==name) return;
if (current!==this) {
current = this;
this.checked = value;
$(this).change();
this.focus();
}
}, function () {
if (name===null) return;
current = null;
}).change(console.log);
$().mouseup(function (e) {
if (name===null) return;
name = null;
if (e.originalTarget===orig) {
var radio = orig.getAttribute('type').toLowerCase() == 'radio';
if (radio)
orig.checked = true;
else
orig.checked = !value;
}
});
});
var
name=null,
value=null,
current=null,
orig=null;
$('input[type="checkbox"], input[type="radio"]')
.mousedown(function () {
if (!this.hasAttribute('name')) return;
orig = this;
name = this.getAttribute('name');
var radio = this.getAttribute('type').toLowerCase() == 'radio';
if (radio)
value = true;
else
value = !this.checked;
this.checked = value;
})
.hover(function () {
if (name===null) return;
if (this.getAttribute('name')!==name) return;
if (current!==this) {
current = this;
this.checked = value;
$(this).change();
this.focus();
}
}, function () {
if (name===null) return;
current = null;
}).change(console.log);
$().mouseup(function (e) {
if (name===null) return;
name = null;
if (e.originalTarget===orig) {
var radio = orig.getAttribute('type').toLowerCase() == 'radio';
if (radio)
orig.checked = true;
else
orig.checked = !value;
}
});
});
Comments
Voting
Votes Up
Votes Down
There are currently no comments for this snippet.