今回は↑のようなボタン風のチェックボックスをつくりました。
チェックボックスがむき出しなのはわかりやすくするためで後で隠すなりします。
最初はcheckboxとlabelのCSSを組み合わせて、クリックしたlabelの色を変えるというのを作ったのですが
これでと自分のIEだとうまく動かないんです、IEだけチェックボックスをダブルクリックした時にずれるんですよね。
なのでlabelを使わずjQueryのみでボタンを押したらcheckboxのチェックを『入れる・はずす』を作りました。
labelを使わずjQueryのみでボタンを押したらcheckboxのチェックを『入れる・はずす』
htmlコード
ABC
CSSコード
div.select_d{ height:20px; padding:5px 15px; margin:0 5px 0 0; float:left; background:#b2ca2e; cursor: pointer; } div.select_a .active{ background-color:#FC9; }
jqueryコード
$ (function(){ $ (".select_d").click(function(){ var checkid = '#select_'+$(this).attr('id'); $(this).toggleClass("active"); if($(this).hasClass('active')) { $(checkid).attr("checked", true); } else { $(checkid).attr("checked", false); } }); });
作りは単純でクリックしたdivのclassにactiveを追加・削除して色を切り替え
内包されているcheckboxがtrueかfalseでチェックを入れるかはずすをするというものです。
各チェックボックスの識別はcheckboxのidと押したdivのidをつかいます
後はチェックボックスを隠してdiv部分cssされ変えれば自分好みのチェックボッスを作る事ができます。