#実現したいこと
掲題の通りです。PHP Laravel、JavaScript(jQuery)を使用して
- 2つあるcheckboxを択一選択にする
- チェックしたほうのコンテンツの表示非表示(効果)を切り替える
を実現したいです。
それぞれ独立(片方をコメントアウト)させた動作はうまくいくのですが
両方を同時に動作させることができません。
こちらの都合上、ラジオボタンではなくチェックボックスで実装したいのですが
どのようにすれば理想の挙動を得られるのかご助力いただけないでしょうか。
#該当コード
html
1<div class="user_info"> 2 <label>{!! Form::checkbox('existing_data' ,"", '', ['id'=>'existing_data']) !!}<span>既存データを参照</span></label> 3</div> 4<div class="userInfoContents">...</div> 5 6<div class="user_info"> 7 <label>{!! Form::checkbox('register_data' , "", '', ['id'=>'register_data']) !!}<span>データを新規登録</span></label> 8</div> 9<div id="input_contents" class="inputContents01">...</div>
JavaScript
1 // チェック有無で効果を切り替える 2 $('#existing_data').change(function() { 3 if ( $(this).is(':checked') ){ 4 $('.userInfoContents').css('opacity','1'); 5 } else { 6 $('.userInfoContents').css('opacity','0.5'); 7 } 8 }); 9 10 $('#register_data').change(function() { 11 if ( $(this).is(':checked') ){ 12 $('#input_contents').css('display','block'); 13 } else { 14 $('#input_contents').css('display','none'); 15 } 16 }); 17 18 // チェックボックスを択一にする 19 $('.user_info input[type=checkbox]').on("click", function(){ 20 $('.user_info input[type=checkbox]').prop('checked', false); // 全部のチェックを外す 21 $(this).prop('checked', true); // 押したやつだけチェックつける 22 });
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。