【環境】

• Windows10
• IE11
• jQuery 3.5.1
• Bootstrap 4.5.0
• thymeleaf

【実現したいこと】

既存のロジックは（できるだけ）大きく変えないという前提で、

全選択ボタンを押下した際に全解除ボタンの背景色などを変化させる（その逆の場合も同様）

これからの↓

↑こんな状態に切り替えたい

【発生している問題】

これからの↓

こうなる↑（IE、お前ぇぇぇえええ!）

【試したこと】

• 現状、以下のようなコードを記述しています。

jQuery( function() {
        jQuery( '#jquery-smaple-form input[name=jquery-smaple-checkbox]' ) . change(
            function () {
                jQuery( '#jquery-smaple-form input' ) . closest('label') . css( {
                    backgroundColor: 'white',
                    borderColor: 'rgb(80, 171, 140)',
                    color:'#303030',
                } );
                jQuery( '#jquery-smaple-form :checked' ) . closest('label') . css( {
                    backgroundColor: 'rgb(80, 171, 140)',
                    borderColor: 'green',
                    color:'white',
                } );
            }
        ) . change();
    } );

　　　　　　　<div id="jquery-smaple-form" class="col-12 col-md-6 row small text-left form-group float-left mb-0">
								<p>
									<label>
										<input type="checkbox" name="jquery-smaple-checkbox" id="all"/>
										全選択
									</label>
									<label>
										<input type="checkbox" name="jquery-smaple-checkbox" id="allNo"/>
										全解除
									</label>
								</p>
							</div>

上記の記述で動きそうな雰囲気を醸し出いしており、IE以外のブラウザでは正常に動作しますが、

IEでは画像のような状態となります。

• 交互にボタンを押下する場合と、一つのボタンを二回続けて押下した場合の挙動を比べる

  交互にボタンを押下した場合にのみ、今回の問題が発生し、一つのボタンを連続して押下した場合はこちらの症状がみられないことを確認。

• 動作をデバッグで確認

  動作をデバッグで確認していた所、IEのみ上記JSのメソッド起動時点で、すでに選択されている側のチェックボックスにチェックが残った状態（選択状態のまま）となっているようです。

  例）全選択ボタンを選択→全解除ボタンを選択

  メソッド起動時点で、全選択ボタンにチェックが残った状態となる

  そのほかのブラウザで確認した際にはいづれもメソッド起動時点ですでに選択されている側のチェックボックスのチェックが外れる。

【仮説】

上記のことから、IEのみメソッド起動時点での二つ以上のチェックボックスが連動する場合動作が異なるため、

 jQuery( '#jquery-smaple-form :checked' ) . closest('label') . css( {
                    backgroundColor: 'rgb(80, 171, 140)',
                    borderColor: 'green',
                    color:'white',
 　} );

全選択・全解除ボタンともにこちらの条件が適用され、背景色が変化しないままになると考えています。

単体のボタンを続けて二回押下した場合は、チェックボックスが選択された時点でチェック判定が切り替わっているため、今回の問題は発生していないと考えています。

【質問】

今回のロジックは（できるだけ）大きく変えないという前提なので、変更するとしたら、

 jQuery( '#jquery-smaple-form :checked' )

ここのチェックボックスのチェック判定を条件としている箇所かと思いますが、条件として採用できそうな要素の案がございましたらお教えいただきたいです。

いくつか試案してみましたが、ぱっと思いつかず、思考の整理もかねて質問させていただきました。

• 今回の仮説が誤っている恐れがございましたらご指摘いただけましたら幸いです。

【方法１】

jQuery( function() {
        jQuery( '#all' ) . change(
            function () {
                jQuery( '#jquery-smaple-form input' ) . closest('label') . css( {
                    backgroundColor: 'white',
                    borderColor: 'rgb(80, 171, 140)',
                    color:'#303030',
                } );
                jQuery( '#jquery-smaple-form :checked' ) . closest('label') . css( {
                    backgroundColor: 'rgb(80, 171, 140)',
                    borderColor: 'green',
                    color:'white',
                } );
				const target = document.getElementById( 'allNo' );
				if(target.checked){
					jQuery( '#allNo' ) . closest('label') . css( {
	                    backgroundColor: 'white',
	                    borderColor: 'rgb(80, 171, 140)',
	                    color:'#303030',
	                } );
				}
            }
        ) . change();
    } );

	jQuery( function() {
        jQuery( '#allNo' ) . change(
            function () {
                jQuery( '#jquery-smaple-form input' ) . closest('label') . css( {
                    backgroundColor: 'white',
                    borderColor: 'rgb(80, 171, 140)',
                    color:'#303030',
                } );
                jQuery( '#jquery-smaple-form :checked' ) . closest('label') . css( {
                    backgroundColor: 'rgb(80, 171, 140)',
                    borderColor: 'green',
                    color:'white',
                } );
				const target = document.getElementById( 'all' );
				if(target.checked){
					jQuery( '#all' ) . closest('label') . css( {
	                    backgroundColor: 'white',
	                    borderColor: 'rgb(80, 171, 140)',
	                    color:'#303030',
	                } );
				}
            }
        ) . change();
    } );

1. 全選択の場合と全解除の場合で分ける
2. 別途どちらか片方がチェック状態ならば背景色を変更する条件を追加する

なんか冗長で、イマイチです、、、