http://www.webantena.net/css/input-type-checkbox-checked/
上記のサイトを参考にチェックボックスにチェックを入れた時に要素に変化を付ける方法を探していました。
一応できていますが、webapiから取得した10件の情報のうち、二つ目のtableから(2件目から)<label></label>部分をクリックすると1件目のtaleのlabelに戻ってしまいます。一件目のtableのチェックボックスをクリックしても動作に不備がありません。
つまり、サイトのようなチェックボックスを作ることはできません。
また写真のような場合だと、二件目以降のtableのチェックボックスでも動作します。ただし、labelをクリックすると1件目のtableのlabelを押したことになり、1件目のtableに戻ってしまいます。
長い話になりましたが、話をまとめると、javascriptを使わなくてはいけないみたいです。このサイトの場合はapiを使ったtableには不向きみたいです。
ユニークidが使えないためです。
ただ、javascriptを使う場合、どういうコードを使えばいいのかわからないのです。
ちなみにjavascriptタグをphpで実行する場合は
php
1<?php 2 3echo <<<EOM 4<script type="text/javascript"> 5 Hello!!! 6</script> 7EOM; 8 9?>
を使うことはわかっています。
今回の質問のコードです。
php
1<style> 2input[type=checkbox] { 3position: absolute; 4top: 15px; 5left: 20px; 6} 7label { 8display: block; 9width:200px; 10text-align:center; 11font-weight: bold; 12color: #fff; 13background: #e54040; 14border:1px solid #dd0000; 15-webkit-border-radius:4px; 16-mozborder-radius:4px; 17border-radius:4px; 18padding: 5px; 19cursor:pointer 20} 21input[type=checkbox]:checked ~ table.ff { 22display:block; 23} 24table.ff { 25display:none; 26} 27</style> 28<table> 29<tr> 30<td> 31<input type="checkbox" id="toggle"> 32<label for="toggle"> 33Toggle Button 34</label> 35<table class="ff"> 36<tr> 37<td> 38$r->name 39</td> 40</tr> 41<tr> 42<td> 43$r->access 44</td> 45</tr> 46</table> 47</td> 48</tr> 49</table>
回答1件
あなたの回答
tips
プレビュー