チェックボックスにチェックが入ったら、カウントする項目数（要素）を追加したい。

###前提・実現したいこと
お世話になります。
以前、「入力フォームのインプット要素「text」「select」「radio」「checkbox」が複合された項目数を表示したい（https://teratail.com/questions/63818）」という題名でインプット要素の項目数をカウントするスクリプトの質問をさせて頂きました。
今回は、特定のチェックボックスにチェックが入った場合、カウントする項目数を増やすという事をしたいのですが、
インプット要素の追加がうまくできません。

ゴールとしては、デフォルトでカウントする項目が「12」で
追加する項目が「6」です。
チェックボックスにチェックが入った場合、「17」（このトリガーになるチェックボックス自体もカウントする項目なので-1）
としたいです。

「.splice」で要素の追加を試みております。
お手数おかけしますが、ご教授よろしくお願いいたします。

###該当のソースコード

javascript
1<script type="text/javascript">
2$( function() {
3	$( 'form' ).each( function(i, element) {
4		
5		//カウントする項目
6		const $_inputs = $( '[name="L_NAME"], [name="F_NAME"], [name="L_KANA"], [name="F_KANA"], [name="PC_MAIL"], [name="PC_MAIL_CONFIRM1"], [name="PC_MAIL_CONFIRM2"], [name="ZIP"], [name="ADDR2"], [name="TEL"], [name="PASSWORD"], [name="PASSWORD2"], [name="ADDR1"], [name="KESSAI_ID"]', element );
7		
8		//クレジットカードにチェックを入れたらカウントする要素を追加
9		$('input[value="51"]').on('click', function() {
10			if ($(this).prop('checked') == true) {
11				$_inputs.splice(14, 0, '[name="CREDIT_COUNT"]', '[name="SECURITY_CD"]', '[name="CREDIT_NAME"]', '[name="CREDIT_NO"]', '[name="CREDIT_LIMIT_MONTH"]', '[name="CREDIT_LIMIT_YEAR"]', element);
12			}
13		});
14		
15		//radio,check以外の要素を指定
16		const $_input_textarea_select = $_inputs.not( '[name="KESSAI_ID"]' );
17		
18		//radio,checkの要素を指定
19		const radio_names = $.unique(
20		  $( '[name="KESSAI_ID"]', element ).map(function(i, e){
21		    return e.name;
22		  }).get()
23		);		
24		
25		$_inputs.on( 'input change', function() {
26			let len = $_input_textarea_select.length + radio_names.length;
27			let count = len;
28			$_input_textarea_select.each( function(i, ele) {
29				if ( $.trim( $( ele ).val() ) ) { count--; }
30			} );
31			$.each( radio_names, function(i, v) {
32				if ( $_inputs.filter( '[name="' + v + '"]:checked' ).length ) { count--; }
33			} );
34			$( '.number', element ).html( count );
35		} ).change();
36	} );
37} );
38</script>

###試したこと
開発環境URL
https://jquery-standard-test-yujiokayama.c9users.io/index.html

行動規範の内容に同意します

回答1件

ベストアンサー

動くかわかりませんが。$_input_textarea_select をアップデートする戦略です。

JavaScript
1$( function() {
2	$( 'form' ).each( function(i, element) {
3		const tgt = '[name="L_NAME"], [name="F_NAME"], [name="L_KANA"], [name="F_KANA"], [name="PC_MAIL"], [name="PC_MAIL_CONFIRM1"], [name="PC_MAIL_CONFIRM2"], [name="ZIP"], [name="ADDR2"], [name="TEL"], [name="PASSWORD"], [name="PASSWORD2"], [name="ADDR1"], [name="KESSAI_ID"]';
4		const add = ', [name="CREDIT_COUNT"], [name="SECURITY_CD"], [name="CREDIT_NAME"], [name="CREDIT_NO"], [name="CREDIT_LIMIT_MONTH"], '[name="CREDIT_LIMIT_YEAR"]';
5		
6		//カウントする項目
7	//	const $_inputs = $( '[name="L_NAME"], [name="F_NAME"], [name="L_KANA"], [name="F_KANA"], [name="PC_MAIL"], [name="PC_MAIL_CONFIRM1"], [name="PC_MAIL_CONFIRM2"], [name="ZIP"], [name="ADDR2"], [name="TEL"], [name="PASSWORD"], [name="PASSWORD2"], [name="ADDR1"], [name="KESSAI_ID"]', element );
8		let $_inputs = $( tgt, element );
9
10		//クレジットカードにチェックを入れたらカウントする要素を追加
11		$('input[value="51"]').on('click', function() {
12			if ($(this).prop('checked') == true) {
13				$_inputs = $( tgt + add, element );
14				$_input_textarea_select = $_inputs.not( '[name="KESSAI_ID"]' );
15			} else {
16				$_inputs = $( tgt, element );
17				$_input_textarea_select = $_inputs.not( '[name="KESSAI_ID"]' );
18			}
19		});
20
21		//radio,check以外の要素を指定
22	//	const $_input_textarea_select = $_inputs.not( '[name="KESSAI_ID"]' );
23		let $_input_textarea_select = $_inputs.not( '[name="KESSAI_ID"]' );
24
25		//radio,checkの要素を指定
26		const radio_names = $.unique(
27			$( '[name="KESSAI_ID"]', element ).map( function( i, e ) {
28				return e.name;
29			} ).get()
30		);		
31
32		$_inputs.on( 'input change', function() {
33			let len = $_input_textarea_select.length + radio_names.length;
34			let count = len;
35			$_input_textarea_select.each( function(i, ele) {
36				if ( $.trim( $( ele ).val() ) ) { count--; }
37			} );
38			$.each( radio_names, function(i, v) {
39				if ( $_inputs.filter( '[name="' + v + '"]:checked' ).length ) { count--; }
40			} );
41			$( '.number', element ).html( count );
42		} ).change();
43	} );
44} ); // 未テスト

追記：

$_inputs.on を忘れていました。

JavaScript
1$( function() {
2	$( 'form' ).each( function(i, element) {
3		const tgt = '[name="L_NAME"], [name="F_NAME"], [name="L_KANA"], [name="F_KANA"], [name="PC_MAIL"], [name="PC_MAIL_CONFIRM1"], [name="PC_MAIL_CONFIRM2"], [name="ZIP"], [name="ADDR2"], [name="TEL"], [name="PASSWORD"], [name="PASSWORD2"], [name="ADDR1"], [name="KESSAI_ID"]';
4		const add = ', [name="CREDIT_COUNT"], [name="SECURITY_CD"], [name="CREDIT_NAME"], [name="CREDIT_NO"], [name="CREDIT_LIMIT_MONTH"], '[name="CREDIT_LIMIT_YEAR"]';
5		let $_inputs, $_input_textarea_select;
6		//radio,checkの要素を指定
7		const radio_names = $.unique( $( '[name="KESSAI_ID"]', element ).map( function( i, e ) { return e.name; } ).get() );
8
9		//クレジットカードにチェックを入れたらカウントする要素を追加
10		$( 'input[value="51"]' ).on( 'click', function() {
11			if ( $( this ).prop( 'checked' ) == true ) {
12				$_inputs = $( tgt + add, element );
13			} else {
14				$_inputs = $( tgt, element );
15			}
16			$_input_textarea_select = $_inputs.not( '[name="KESSAI_ID"]' );
17			$_inputs.off( 'input.tgt change.tgt' ).on( 'input.tgt change.tgt', function() {
18				let len = $_input_textarea_select.length + radio_names.length;
19				let count = len;
20				$_input_textarea_select.each( function(i, ele) {
21					if ( $.trim( $( ele ).val() ) ) { count--; }
22				} );
23				$.each( radio_names, function(i, v) {
24					if ( $_inputs.filter( '[name="' + v + '"]:checked' ).length ) { count--; }
25				} );
26				$( '.number', element ).html( count );
27			} ).change();
28		} ).click();
29	} );
30} ); // 未テスト