iCheck利用時の各イベントの取得方法
公開日: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()のコールバックで使えます。
1 2 3 |
$('input').on('ifChecked', function(event){ alert(event.type + ' callback'); }); |
まとめ
- icheckプラグインは普通のコールバック関数が使えない
- changeイベントやclickイベントだけでなく、さまざまな状態変化を発火条件にできる
ウィズテクノロジーで一緒に働きませんか?
分野を限定せず幅広い事業を展開。新しい技術の導入にも積極的に取り組んでおり、チャレンジや成長する機会が沢山。
あなたの経験・知識を活かしながら一緒にIT業界を盛り上げて行きましょう!
採用情報詳細はコチラ