jQueryでテーブルの行ごとクリックして
チェックボックスにチェック出来るよう
にするTipsです。ユーザーがデータを
見ながらフォームを送信する際に、分か
りやすくしてあげよう、という目的です。
行ごとクリッカブルにする、みたいな感じ。
ちょっとサーバー移転作業もあるので適当な記事が日々続きますけど・・まもなく移転完了します。
Sample
サンプルです
:hover使うのでIE6だけ色が変わりませんけど、チェックはクロスブラウザで可能です。
コード
$(document).ready(function() { $('input[type=checkbox]').click(function() { var t = $(this).prop; if(t('checked')) t('checked', ''); else t('checked', 'checked'); }); $('table tr').click(function() { var c = $(this).children('td').children('input[type=checkbox]'); if(c.prop('checked')) c.prop('checked', ''); else c.prop('checked', 'checked'); }); }); |
(‘checked’, false)とかでもOKです。どっちがいいとかあるのかな？よくわからん。サンプルではjQuery1.6.4を使っていますのでattrではなくpropにしています。
押しやすいし、データを見ながら入力するような複雑なフォームでもこのようにデータを見ながらその場でチェックできればユーザーさんの離脱も防げるんじゃないかなって思いました。ECサイトにも使えそうな気がしますな。
コードは以下を参考にしました。
(via:webstuffshare)
