jqueryでIEのダブルクリックに負けない!?チェックボックスのデザイン変更

ワードプレスアイキャッチ
こんにちは、jQuery をいじってます。

クリック

今回は↑のようなボタン風のチェックボックスをつくりました。
チェックボックスがむき出しなのはわかりやすくするためで後で隠すなりします。

最初はcheckboxとlabelのCSSを組み合わせて、クリックしたlabelの色を変えるというのを作ったのですが
これでと自分のIEだとうまく動かないんです、IEだけチェックボックスをダブルクリックした時にずれるんですよね。

なのでlabelを使わずjQueryのみでボタンを押したらcheckboxのチェックを『入れる・はずす』を作りました。

スポンサーリンク

labelを使わずjQueryのみでボタンを押したらcheckboxのチェックを『入れる・はずす』

htmlコード

A
B
C

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をつかいます

これでIEの時チェックボックスをダブルクリックしてもおかしい動きをしなくなりました。
後はチェックボックスを隠してdiv部分cssされ変えれば自分好みのチェックボッスを作る事ができます。
ブログランキング
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。