前提・実現したいこと
jQueryを用いて
「チェックボックスにチェックされたらdivで囲まれた部分を開く。また、チェックボックスはCSSを用いて隠し、
上にlabelタグを用いてその中の文字列と共に四角い枠にする」
というものを作ろうとしています。
発生している問題・エラーメッセージ
Google Chromeの検証を見るとエラーは出ておらず、チェックボックス隠蔽とlabelタグの部分は問題ありませんが、
チェックをしてもdivで囲まれた部分が表示されません。
また、下記のコードでは全ての四角の枠が重なり合います。
尚、チェックをしたか否かはjQueryで確認し、Google Chromeの検証を用いてチェックをしたかは確認してあります。
また、CSSとJavascriptのソースはPHPファイルに埋め込んであります。
該当のソースコード
Js
1$(funtion(){ 2 var prop= $('.survey').prop('checked'); 3 $('.hidden_show').css('display', 'none'); 4 if(prop){ 5 $('.hidden_show').show(120); 6 } 7 8});
HTML
1 <p><label for="label1" class="survey_l">属性</label> 2 <input type="checkbox" id="label1" class="survey"></p> 3 <div class="hidden_show"> 4<!--非表示部分--> 5</div> 6<!--これと同じように続いていきますが 7今表示している部分においてdivタグとinputタグのクラスはこの後に続くものも一緒ですがidは全て異なります。 8また、divタグの中にはinputタグ、selectタグ、textareaタグ、spanタグ(クラスは無し。用いるのはすべて名前が異なるid属性)を用いています。 9尚、divタグの全てのクラスが同じなのはあくまでも便宜上の都合です。-->
CSS
1<style type="text/css"> 2.survey_l{ 3 padding: 15px; 4 font-weight: bold; 5 border: solid 2px black; 6 cursor :pointer; 7} 8 9/*チェックは見えなくする*/ 10 .survey { 11 display: none; 12} 13 14/*中身を非表示にしておく*/ 15 .hidden_show { 16 display: none; 17/* height: 0; 18 padding: 0; 19 overflow: hidden; 20 opacity: 0; 21 transition: 0.8s; */ 22}
試したこと
CSSの最後の部分のdisplay:none;を消してコメントアウトを解除すると四角の枠が重なりませんが状況は変わりませんでした。
また、Javascriptの変数propをチェックボックスのidにしましたがそれでも状況は変わりませんでした。
補足情報(FW/ツールのバージョンなど)
jQuery:3.2.0
jQueryはheadタグの中で既に読み込んでおり、パスも正しいです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/03/24 09:02
2018/03/30 05:42
2018/03/30 05:55
2018/03/30 06:28
2018/03/30 09:31
2018/03/30 09:58