フォーム内のチェックボックス選択をカウントする方法

はじめに

フォーム内のチェックボックスの選択数をカウントしますか？簡単なスニペットを使用すると、各選択が行われるたびに増減する選択数をフォームに自動的に表示できます。このチュートリアルでは、これを達成する方法の各ステップを説明します。

フォームの作成

まず、新しいフォームを作成し、フォームにチェックボックスフィールドを追加する必要があります。フォームの作成にヘルプが必要な場合は、このドキュメントを確認してください。

チェックボックスの選択数を保持するフィールドを追加する

次に、選択が行われるにつれてカウントを保持するフィールドをフォームに追加します。

フォームにカウントを保持する一行テキストフォームフィールドを追加します。

サイトにスニペットを追加する

次に、選択がチェックまたはチェック解除されるにつれてカウントを更新するスニペットをサイトに追加する時間です。

サイトにスニペットを追加するのにヘルプが必要な場合は、このチュートリアルをご覧ください。

/*
 * Count checkbox selections
 *
 * @link  https://wpforms.com/developers/how-to-count-checkbox-selections-inside-your-form/
 */

function wpf_dev_checkbox_count() {
    ?>
    <script type="text/javascript">
		(function($) {
			
			//Count the checkbox selections on field ID 25 for the form ID 374
			var $checkboxes = $( '#wpforms-374-field_25 input[type="checkbox"]' );
			
			$checkboxes.change(function(){
				
				var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
				
				//Add the count to the field ID 27 for the form ID 374
				$( '#wpforms-374-field_27' ).val(countCheckedCheckboxes);
				
			});
		})(jQuery);	
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_checkbox_count', 10 );

このスニペットは、スニペットを実行するフォームIDと一致するように、フォームID374が必要です。

また、スニペットでは、フォームのチェックボックスフィールドと一行テキストフィールドであるfield_25とfield_27が表示されます。

フォームとフィールドIDの見つけ方にヘルプが必要な場合は、このチュートリアルを確認してください。

これらのすべてのステップに従った後、訪問者がチェックボックスの選択を選択すると、フィールドのカウントが動的に更新されます。

これで完了です！チェックボックスのラベルにスマートタグを使用しますか？チェックボックスラベルでスマートタグを処理する方法に関するチュートリアルをご覧ください。

関連

アクション参照: wpforms_wp_footer_end

よくある質問

Q: 単一のフォームのすべてのチェックボックスフィールドのチェックボックスラベルで合計を取得できますか？

A:もちろんです。この例では、このフォームのすべてのチェックボックスでラベルAgreeが選択された回数をカウントするだけです。これを達成するには、代わりにこのスニペットを使用してください。Agreeのテキストを検索したいテキストと一致するように変更し、サイトのフォームとフィールドIDを更新するだけです。フォームとフィールドIDの見つけ方にヘルプが必要な場合は、このチュートリアルを確認してください。

/*
 * Count checkbox selections with the label Agree
 *
 * @link  https://wpforms.com/developers/wpforms_frontend_output_success/ 
 */
 
function wpf_dev_checkbox_count() {
    ?>
    <script type="text/javascript">
        (function($) {
			
			//Count all the checkbox selections in the form ID 374
            var $checkboxes = $( '#wpforms-form-374 input[type="checkbox"]' );
             
            $checkboxes.change(function(){
                
				let total = 0;
				$checkboxes.each( function( index ) {
					
					// Look for any checkboxes on this form field that are checked and also match the word Agree and count them
					if( $(this).is(":checked") && $(this).next().text() == "Agree" ) {
					   total ++;
					}
					
				});
				
                //Add the count to the field ID 27 for the form ID 374
                $( '#wpforms-374-field_27' ).val(total);
                 
            });
        })(jQuery); 
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_checkbox_count', 10 );