問題タブ [icheck]

AngularJS アプリの 1 つに奇妙な問題があります。アプリはチェックボックスのスタイリングに iCheck を使用しますが、問題は次のとおりです。携帯電話(またはモバイル エミュレーター) でラベルをクリックしてチェックボックスを選択すると、チェックボックスに関連付けられたイベントが 2 回発生します。

問題を自分で再現できる JSFiddle を作成しました: https://jsfiddle.net/o6oewfff/22/

まず、それがどのように機能するかを見てみましょう。

1. ブラウザで JSFiddle を開きます
2. 開発者ツールバーで JavaScript コンソールを開きます
3. ラベルをクリックしてチェックボックスの 1 つを選択すると、コンソール ログに次の 3 つのログ項目が表示されます: Apply、Event called、およびUpdate

それでは、修正しようとしている問題を再現しましょう。

1. モバイル エミュレーターで JSFiddle を開きます (たとえば、iPhone 6 を試してください)。
2. 開発者ツールバーで JavaScript コンソールを開きます
3. ラベルをクリックしてチェックボックスの 1 つを選択すると、コンソール ログに次の5 つのログ項目が表示されます: Apply、Event called、Update、Event called、およびUpdate

スクリーンショット: http://i.stack.imgur.com/7j03S.png

ご覧のとおり、「呼び出されたイベント」と「更新」をコンソールに記録しているイベントは、モバイルを使用すると 2 回トリガーされます。また、チェックボックスはチェックされていません。なぜこれが起こるのか誰でも理解できますか？

ありがとう！

実はここにも似たような質問があります。その質問の解決策は機能しています。そこで、そこからソリューションを選択し、ローカル PC に配置しました。しかし、それはうまくいきませんでした！次に、新しい Plunker ( icheck-pluginを新しくコピー) を作成し、そこにソリューションを配置します。しかし、現時点では、プランカーも機能していないことに気付きました。ディレクティブごとにクラスを追加しました：

しかし、inspect要素で見るとクラスが達成されていないようです。なぜ、これが起こったのですか、どうすれば修正できますか?

jquery 用の iCheck プラグインを使用してチェックボックスのスタイルを設定するこのコードがあります。後で「挿入」属性を変更する方法はありますか? iCheck を再作成しようとしましたが、そのようにするとコールバック関数が削除されます。

チェックボックスにiCheckプラグインを使用しています。そこに「すべて選択」機能を配置しました。構造：

• すべて選択
• チェックボックス 1
• チェックボックス 2
• チェックボックス 3

「すべて選択」をオンにすると、すべてのチェックボックスがオンになります。「すべて選択」のチェックを外すと、すべてのチェックボックスがオフになります。ただし、「すべて選択」にチェックを入れた後、いずれかのチェックボックスをオフにすると、その時点ではすべてのチェックボックスがチェックされていないため、「すべて選択」は自動的にオフになります。

これを作るために、私はこれを書きました：

しかし、このコードを配置した後、「すべて選択」がシングルクリックでは機能せず、複数回クリックする必要があるなど、チェックボックスが正常に機能しません。また、単一のチェックボックスがオフになっている場合、「すべて選択」はオフになりません。コードの問題は何ですか？正しく書くには？

フィドルワーク

入力の 1 つでクリックすると jQuery 関数をトリガーしようとしています。

簡単な例は次のとおりです。

jQuery:

入力

CSS

css クラス名を i-check 以外の名前に変更して実行すると、動作します。だから私はそれが私のCSSと関係があることを知っています。