Contact Form 7のフォームにラジオボタンを使用している場合、選択されたラジオボタンに特定のクラスを動的に追加することで、スタイルを簡単に変更できます。今回は、ラジオボタンが選択されたときに対応するラベルにクラスを追加し、スタイルを変更する方法をご紹介します。
JavaScriptコード
以下のコードを使用して、Contact Form 7のラジオボタンに動的にクラスを追加します。
JavaScript
<script>
document.addEventListener('DOMContentLoaded', function() {
const radioButtons = document.querySelectorAll('input[name="radio-100"]');
radioButtons.forEach(radio => {
radio.addEventListener('change', function() {
radioButtons.forEach(rb => {
rb.closest('.wpcf7-list-item').classList.toggle('checked', rb.checked);
});
});
});
// 初期状態でチェックされているラジオボタンにクラスを設定
radioButtons.forEach(rb => {
if (rb.checked) {
rb.closest('.wpcf7-list-item').classList.add('checked');
}
});
});
</script>コードの説明
- DOMContentLoadedイベントリスナー
ページの読み込みが完了したら、指定した処理を実行します。これにより、DOMツリーが完全に構築された後にスクリプトが実行されることを保証します。 - ラジオボタンの選択とイベントリスナーの設定
querySelectorAllメソッドを使用して、特定の名前属性（例:radio-100）を持つすべてのラジオボタンを選択します。それぞれのラジオボタンに対して、変更が発生したときに実行されるイベントリスナーを追加します。 - クラスの切り替え
ラジオボタンが変更されたときに、全てのラジオボタンをチェックし、選択されているラジオボタンに対応する親要素にcheckedクラスを追加します。選択されていない場合はクラスを削除します。 - 初期状態のクラス設定
ページ読み込み時に、既に選択されているラジオボタンに対してcheckedクラスを追加します。これにより、ページが読み込まれた時点で選択状態が正しく反映されます。
カスタムCSS
追加したクラスを利用して、選択されたラジオボタンのスタイルを変更するためのCSSも設定します。
CSS
<style>
.wpcf7-list-item.checked {
background-color: #f0f0f0; /* 選択時の背景色を変更 */
border: 2px solid #0073e6; /* 選択時の枠線色を変更 */
}
</style>このようにして、Contact Form 7のラジオボタンに動的にクラスを追加し、スタイルを変更することができます。
