質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

1回答

2196閲覧

チェックボックスのボタンを設置したい。

aba623ky

総合スコア63

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2016/10/10 05:35

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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

toutou

2016/10/10 05:44

なにがどうしてどうなったとか文章ではなく、言葉がごちゃごちゃしすぎて何が問題かわからない。整理して問題点をこれだというのをあげてほしい。一言で
aba623ky

2016/10/10 05:51

つまり、phpにjavascriptタグを使うならどういうコードを書けばいいのか教えて下さい。
toutou

2016/10/10 05:53

ちなみにjavascriptタグをphpで実行する場合は、の後の文章で書いてないか?それを書けばいいのでは
guest

回答1

0

ベストアンサー

話が相当戻りますが、tableでメニューを作ることが
マークアップの方法としてそもそもの間違いであって、
早晩行き詰まるのはわかっていたはずですが、
それでもまだtableを使い続けますか?

追記

$rがループからデータを抜き出しているとして
$countというカウンタを用意して
$count=0;
を予め宣言しておき

<input type="checkbox" id="toggle{$count}"> <label for="toggle{$count}">

としてループのケツの方に
$count++;

とすれば、ユニークなチェックボックスはつけることができます

投稿2016/10/10 06:43

編集2016/10/11 01:04
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aba623ky

2016/10/10 06:47

tableを使わないなら何を使えばいいですか?
yambejp

2016/10/11 01:01

ul~liが一般的です。
yambejp

2016/10/11 01:04

ループ処理でカウンタをつかってユニークなidをつける方法は例示しておきました
aba623ky

2016/10/11 01:45

>としてループのケツの方に $count++; これはtableの下ですよね?
yambejp

2016/10/11 01:50

とにかくループのケツの方です。 tableの下かどうかは、こちらで判断できません 好きなところに書いてください
aba623ky

2016/10/11 05:32

分かりました。
aba623ky

2016/10/11 06:25

labelを押したら、ページのトップに行くようなことは無くなりました。 しかし、サイトのことを実装すると、以前はクリックできたのがクリックできなくなりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問