公開日：2023年06月12日カテゴリー：JavaScript, 開発

みなさんはiCheckというプラグインをご存じでしょうか。
このプラグインはラジオボタンやチェックボックスの見た目をかなりモダンでリッチにしてくれる便利なプラグインで、
bootstrapを用いたテンプレートでよく利用されています。

しかし、例えば hogehoge.on("click", function(){}) のような普通の書き方ではイベントをキャッチできません。
そこで今回はiCheckのイベント取得方法を紹介します。

なお、githubにはすべて記載されているので、そちらもご覧ください。

iCheck plugin

コールバック一覧

コールバック名	発火条件
ifClicked	ラジオボタンかチェックボックスがクリックされたとき。 Jqueryの[click]に相当。
ifChanged	ラジオボタンかチェックボックスが何らかの変化があったとき。 JQueryの[change]に相当。
ifChecked	ラジオボタンかチェックボックスがチェックされたとき。
ifUnchecked	ラジオボタンかチェックボックスがチェックが外されたとき。
ifToggled	ラジオボタンかチェックボックスが何らかの変化があったとき。 JQueryの[change]に相当。 ifChangedと似ているので注意
ifDisabled	ラジオボタンかチェックボックスがdisabledになったとき。
ifEnabled	ラジオボタンかチェックボックスがdisabledが外されたとき。
ifIndeterminate	JQueryにおけるindeterminate状態（なにも触っていない状態）のとき。
ifDeterminate	JQueryにおけるindeterminate状態（なにも触っていない状態）でなくなったとき。
ifCreated	ラジオボタンかチェックボックスが作られたとき。
ifDestroyed	ラジオボタンかチェックボックスが削除されたとき。

jQueryのプラグインなので.on()のコールバックで使えます。

$('input').on('ifChecked', function(event){
  alert(event.type + ' callback');
});

$('input').on('ifChecked', function(event){

alert(event.type + ' callback');

});

ウィズテクノロジーで一緒に働きませんか？
分野を限定せず幅広い事業を展開。新しい技術の導入にも積極的に取り組んでおり、チャレンジや成長する機会が沢山。
あなたの経験・知識を活かしながら一緒にIT業界を盛り上げて行きましょう！
採用情報詳細はコチラ