« 1歳の誕生日にクマのシロホンをプレゼント | トップページ | はてブした記事をコメント付きでブログに貼り付けられるサービス »

2012年9月20日 (木曜日)

複数のチェックボックスをドラッグで選択

 formでチェックボックスがずらっと並んでる場合。複数のチェックボックスを1個ずつ選ぶのは面倒。ドラッグで一気に選択できればいいのに。

 と、リンク抽出サービスlinclipを使っているときに特に思うのだった。linclipはページ内のリンクを抽出して、リンク用のHTMLタグ付きで出力するサービス。これに機能を追加したい。

 そこで見つけたのが、このコード。

 ドラッグでチェックできるようにするブックマークレット【JavaScript】 - Programming Magicはてなブックマーク - ドラッグでチェックできるようにするブックマークレット【JavaScript】 - Programming Magic

 既存のコードにこれを付け加えるだけで、希望の動作となった。

Linclipdrag

 ドラッグを開始したチェックボックスの状態によって、その後のチェックボックスの状態が変わる。最初のチェックボックスがチェックなしの状態で始めると、ドラッグした部分はすべてチェックした状態となる。チェックあり・なしが並んでても、それぞれの状態が反転したりしない(最初の状態に従う)ってのが使いやすいと感じたところ。

 とっても便利。すばらしいコードの公開、ありがとうございます!

 上記のコードのほか、以下のコードも参考にさせていただきました。サービスの仕様によっては、これらも使えそうです。

 ということで、linclipの機能追加のお知らせも兼ねて、メモでした。

 あっ、iOSとかAndroidとかだと、ドラッグすると画面自体がスクロールするので、ドラッグによるチェックボックスの複数選択はできないです。念のため。


|

« 1歳の誕生日にクマのシロホンをプレゼント | トップページ | はてブした記事をコメント付きでブログに貼り付けられるサービス »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35726/55702545

この記事へのトラックバック一覧です: 複数のチェックボックスをドラッグで選択:

« 1歳の誕生日にクマのシロホンをプレゼント | トップページ | はてブした記事をコメント付きでブログに貼り付けられるサービス »