JavaScript を使用してブートトグルを追加するにはどうすればよいですか?

Bootstrap ライブラリは、コーディング エクスペリエンスをよりスムーズにするための多くの機能をユーザーに提供します。ユーザーが選択できる機能の 1 つはトグル スイッチです。便利な機能の 1 つはトグル スイッチです。これを使用すると、オンとオフなど 2 つの状態を切り替えることができるコンポーネントを追加できます。

ブートスイッチ

Cascading Style Sheets (CSS) Framework Bootstrap は、Web サイトの作成をより簡単にし、標準に準拠させるツールキットです。 JavaScript とともに使用して、応答性の高いユーザー インターフェイスを作成できます。シンプルなブートストラップ トグル スイッチ コンポーネントを使用して、利用可能な 2 つの選択肢のうち 1 つを選択します。オン/オフスイッチとしてよく使用されます。

＃＃＃方法＃＃＃

この記事では、JavaScript を使用してブートトグルを追加する 2 つの異なる方法を見ていきます。それらは次のとおりです -

bootstrapToogle() メソッドを使用する
JavaScript メソッド toggleOn() および toggleOff() を使用します
方法 1: BootstrapToogle() メソッドを使用する

Toggle Bootstrap 要素は、組み込みの data-toggle 属性を使用して実行されます。この場合、タスクは bootstrapToggle() メソッドを使用して実行されます。 bootstrapToggle() メソッドを使用してスイッチを切り替えることができます。スイッチが無効な状態にあるときにユーザーがチェックボックスをクリックすると、有効な状態に切り替わります。 bootstrapToggle() メソッドは、チェックボックスが現在有効になっている場合、そのチェックボックスを無効な状態に切り替えます。

＃＃＃例＃＃＃

この例で使用する完全なコードは次のとおりです -

リーリー

方法 2: JavaScript メソッド toggleOn() および toggleOff() を使用する

クリックすると JavaScript 関数を実行する別のボタンを使用してスイッチを切り替えることもできます。 JavaScript コードを使用して、以前の状態に基づいてスイッチをオンまたはオフにすることができます。ここで、toggleOff() メソッドはスイッチをオフにし、toggleOn() メソッドはスイッチをオンにします。

＃＃＃例＃＃＃

この例で使用する完全なコードは次のとおりです -

リーリー ＃＃＃結論は＃＃＃

この記事では、JavaScript を使用してブートストラップ トグルを追加する方法を学びました。このタスクを達成するための 2 つの方法を検討しました。最初に bootstrapToggle() メソッドを使用してこれを行う方法を説明し、その後、同じ効果を達成するために toggleOn() メソッドと toggleOff() メソッドを使用する方法も説明しました。

以上がJavaScript を使用してブートトグルを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。