これからの季節に親子でハイキング! >>

チェックボックスにチェックされたものについて、データベースで条件検索をしたいです。

形としては、チェックボックスで任意にチェックできて、最後に送信ボタンを押すと検索結果ページがでてくる仕組みにしたいです。

いちおうこうなってくれればいいんだけど、っていうのがあるんですけど、
例えば、
□goo
をチェックすると
http://www.abc.com/database.cgi?table=xx&search= …
のように語尾に&search=gooがくっついた形でリンクをさせたいです。
チェックが複数の場合は、
□goo
□教えて
□神様
だとすると、
http://www.abc.com/database.cgi?table=xx&search= …教えて,神様
のように,で区切ってリンクをさせたいです。

ちなみに、使ってるデータベースはHeRO DBです。

よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

遅くなってすみません。


こんな感じでどうでしょうか?
3つともチェックを入れるとこうなります。
 http://www.abc.com/database.cgi?table=xx&search= …教えて,神様

ちなみにJavascriptを使わず、ただsubmitするとこうなりました。(IE6)
 http://www.abc.com/database.cgi?table=xx&search= …
---------------------
<html>
<head>
<script>
<!--
function test() {
  var param = "";
  var f = document.forms[0];
  var chk = f.search;
  if(chk) {
    if(chk.length) {
      // チェックボックスが複数のとき
      for(var i = 0 ; i < chk.length ; i++) {
        if(chk[i].checked == true) {
          if(param != "") {
            param += ",";
          }
          param += chk[i].value;
        }
      }
    }
    else {
      // チェックボックスが1つしかないとき
      if(chk.checked == true) {
        if(param != "") {
          param += ",";
        }
        param += chk.value;
      }
    }
  }
  // ページを飛ばす
  location.replace(f.action + "?table=xx&search=" + param);
}
//-->
</script>
</head>
<body>
<form action="http://www.abc.com/database.cgi" method="get">
<input type="hidden" name="table" value="xx">
<input type="checkbox" name="search" value="goo">goo<br>
<input type="checkbox" name="search" value="教えて">教えて<br>
<input type="checkbox" name="search" value="神様">神様<br>
<input type="button" onclick="test()" value="click me"><br>
<input type="submit" value="submit">
</form>
</body>
</html>
    • good
    • 0
この回答へのお礼

ありがとうございました。大変参考になりました。
自分でも本やホームページを見ながらなんとかつくってみました。また、プログラミングに行き詰ったら質問にきたいと思います。この度は本当にありがとうございました。

お礼日時:2005/05/22 21:02

送信ボタンをクリックしたときのJavscriptで


チェックボックスのチェック状態を見ながら
URL文字列にパラメータを付加していって
そのURLに飛ばせばいいのではないでしょうか?

この回答への補足

私のしたいことはまさしくそれです。
ただ、URL文字列にパラメータを付加していって、というプログラムの書き方どうしてもわからないんです。

どのように書けばいいのか具体的に教えていただけないでしょうか?

補足日時:2005/05/14 00:30
    • good
    • 0

Javascriptの問題ではないのですね。



で、
http://www.abc.com/database.cgi?table=xx&search= …教えて,神様

はHTMLの使用としては不可能です。
PerlとかPHPなどで加工すればできないことはないですが、加工するときは一旦受け取らなければいけないので、意味がありません。
(値を送信 -> スクリプトで処理 -> 結果表示 が本来の処理。
質問の処理では
値を送信 -> スクリプトで加工 -> 加工した値を送信 -> スクリプトで処理 -> 結果表示
と、工程が増えるだけ無駄です)

要するに処理するスクリプトの問題です。
    • good
    • 0
この回答へのお礼

この度はありがとうございました。
方法としてはいろいろなのもがあるのですね。
自分なりにあれこれ模索してみたいと思います。

お礼日時:2005/05/22 21:05

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qチェックボックスによる検索

こんばんは。お世話になっております。
PHPにてDB(MySQL)に登録されたデータをチェックボックスのみで検索するスクリプトを組んでおりますが、チェックボックスの数が多数あり、混乱してしまい、お力をお借りしたく投函させて頂きました。
上手く説明できるかどうか判りませんが…

まず検索項目として、(複数チェック可)
カテゴリ: □ドリンク □グルメ □ケーキ
年齢:   □20代  □30代

以上のようなフォームを用意しており、各チェックボックスのnameはDBのフィールドを同じ名前。valueは実際に登録されている数値を記述しています。

そこで、上記チェックボックスにいくつかのチェックを入れ、検索すると、それに該当するものだけを検索結果として一覧表示させたいのですが、現在、全ての項目に当てはまるものと一緒に、1つでも含んだデータまでもが表示されてしまいます。

お忙しい中恐縮ですが、お知恵を頂戴出来ればと考えております。
宜しくお願い致します。

//POSTで受け取ったデータを配列にし、
foreach($arr as $category){
$wherearr1[] = " ( category = '$category' )" }
foreach($arr as $category){
$wherearr2[] = " ( age = '$age' )" }

$wherestr1 = implode(" OR ",$wherearr1);
$wherestr2 = implode(" OR ",$wherearr2);
$sql = "select * from member where $wherestr AND $wherestr1 order by date desc";

$result = mysql_query($sql);

こんばんは。お世話になっております。
PHPにてDB(MySQL)に登録されたデータをチェックボックスのみで検索するスクリプトを組んでおりますが、チェックボックスの数が多数あり、混乱してしまい、お力をお借りしたく投函させて頂きました。
上手く説明できるかどうか判りませんが…

まず検索項目として、(複数チェック可)
カテゴリ: □ドリンク □グルメ □ケーキ
年齢:   □20代  □30代

以上のようなフォームを用意しており、各チェックボックスのnameはDBのフィールドを同じ名前。valueは実...続きを読む

Aベストアンサー

どっちもチェックされていることが前提で。

<form>
<b>カテゴリ</b><br>
<input type="checkbox" name="cate[]" value="1">ドリンク<br>
<input type="checkbox" name="cate[]" value="2">グルメ<br>
<input type="checkbox" name="cate[]" value="3">ケーキ<br>
<br>
<b>年齢</b><br>
<input type="checkbox" name="age[]" value="10">10代<br>
<input type="checkbox" name="age[]" value="20">20代<br>
<br>
<input type="submit">
<input type="hidden" name="aaa" value="aaa">
</form>



<?PHP

$arr1 = array();
foreach($_GET['cate'] as $cate){
$arr1[] = " category = '$cate' ";
}
$arr2 = array();
foreach($_GET['age'] as $age){
$arr2[] = " age = '$age' ";
}

$a = implode(" OR ",$arr1);
$b = implode(" OR ",$arr2);
$sql = "select * from member where ($a) AND ($b) order by date desc";

print $sql;

?>

修正してみて思ったのですが、二つとも「$arr as $category」だったり、
使用された形跡がない変数「 $wherestr 」が使われていたりします。
あとは、
$a = implode(",",$_GET['cate']);
として、 category in ($a) とかやってみたりしてもいいでしょう。

<?PHP

$a = implode(",",$_GET['cate']);
$b = implode(",",$_GET['age']);
$sql = "select * from member where category in ($a) AND age in ($b) order by date desc";

print $sql;

?>

どっちもチェックされていることが前提で。

<form>
<b>カテゴリ</b><br>
<input type="checkbox" name="cate[]" value="1">ドリンク<br>
<input type="checkbox" name="cate[]" value="2">グルメ<br>
<input type="checkbox" name="cate[]" value="3">ケーキ<br>
<br>
<b>年齢</b><br>
<input type="checkbox" name="age[]" value="10">10代<br>
<input type="checkbox" name="age[]" value="20">20代<br>
<br>
<input type="submit">
<input type="hidden" name="aaa" value="aaa">
</form>


...続きを読む

Qサイト内の物件を複数の検索条件で絞り込む方法

javascriptのみで実現したいです。

よく情報の多いサイトで
ドロップダウン形式の検索条件を指定して
物件を絞り込む機能を見たことがあります。

例えば物件が200ほどある不動産のサイトを作る場合
(200物件を1ページ内に全て表示させます)

<html>
<head>
<style type="text/css">
h1{
color:#f00;
}
.contents{
width:400px;
padding:10px;
border: 2px solid #f00;
margin-bottom:50px;
}
.shashinn{
width:300px;
height:200px;
background-color:black;
}
</style>
</head>
<body>
<h1>物件情報</h1>

<div class="contents">
<h2>物件1</h2>
場所:神奈川県横浜市<br>
物件種別:売地<br>
価格:1200万円<br>
敷地面積:150.00m2<br>
<br>
<div class="shashinn">写真</div>
<br>
お勧め物件です。
</div>

<div class="contents">
<h2>物件1</h2>
場所:神奈川県横浜市<br>
物件種別:売地<br>
価格:1200万円<br>
敷地面積:150.00m2<br>
<br>
<div class="shashinn">写真</div>
<br>
お勧め物件です。
</div>

<div class="contents">
<h2>物件1</h2>
場所:神奈川県横浜市<br>
物件種別:売地<br>
価格:1200万円<br>
敷地面積:150.00m2<br>
<br>
<div class="shashinn">写真</div>
<br>
お勧め物件です。
</div>
</body>
</html>

上記のhtmlにjavascriptだけで
以下のような検索条件で絞り込むことは可能でしょうか。

物件種別(売地、新築住宅、中古住宅、マンション)
市町村(横浜市、鶴見区、神奈川区、西区、・・・)
値段(500万未満、500万以上1000万未満、1000万以上1500万未満、・・・)

ドロップダウンで検索条件が選択でき、
OKボタンを押すとそれに該当する物件が絞られる。
例えば、
物件種別ではマンション
市町村は選ばずに
値段は500万以上1000万未満
を検索条件で選択した場合、
その2つの条件に該当したものにまとめられる。

といったようにしたいです。

javascriptのみで実現したいです。

よく情報の多いサイトで
ドロップダウン形式の検索条件を指定して
物件を絞り込む機能を見たことがあります。

例えば物件が200ほどある不動産のサイトを作る場合
(200物件を1ページ内に全て表示させます)

<html>
<head>
<style type="text/css">
h1{
color:#f00;
}
.contents{
width:400px;
padding:10px;
border: 2px solid #f00;
margin-bottom:50px;
}
.shashinn{
width:300px;
height:200px;
background-color:black;
}
</style>
</head>
<body>
<h1>物件情報</h1>

<d...続きを読む

Aベストアンサー

しつもんしゃさんがじぶんでかいておいた、div#kensaku ようそをかってにけすからうごかないのさ。
もじすうせいげんがあるから、みじかくかいたために、りかいしにくいですね。では!

<!DOCTYPE html>
<html lang="ja">
<head>
 <title>Test</title>
 <meta charset="utf-8">
 <style>
#BUKKEN, #BUKKEN ol {
 list-style :none;
 margin: 1em 0;
 padding : 0;
}

#BUKKEN li > ol > li:nth-of-type(1) {
 border-bottom : 2px blue solid;
 font-size: x-large;
 width:200px;
 color:#080;
 margin-bottom: 1ex;
}
#BUKKEN li > ol > li:nth-of-type(4) {
 color : red;
}

#BUKKEN li > ol > li:nth-of-type(6) > img {
 border : 1px green solid;
 width: 200px;
 height:80px;
}

#kensaku {
 border : 1px green solid;
 width: 600px;
}

 </style>
</head>
<body>
<div id="kensaku">
<form action="#">
 <ol>
  <li>
   物件種別:
   <select name="sel_type">
    <option value="">
    <option value="売地">売地
    <option value="新築住宅">新築住宅
    <option value="中古住宅">中古住宅
    <option value="マンション">マンション
   </select>

  <li>
   市町村:
   <select name="sel_adr">
    <option value="">
    <option value="横浜市">横浜市
    <option value="鶴見区">鶴見区
    <option value="神奈川区">神奈川区
    <option value="西区">西区
   </select>
  
  <li>
   価格:
   <select name="sel_kakaku">
    <option value="">
    <option value="0,500">500万未満
    <option value="500,1000">500万以上1000万未満
    <option value="1000,1500">1000万以上1500万未満
   </select>
 </ol>
 <p>
  <input type="reset" onclick="allDisp()">
  <img src="sample.jpg" onclick="find2()" alt="検索ボタン">
 </p>
</form>
</div>

<ul id="BUKKEN">
 <li>
  <ol>
   <li>物件1
   <li>場所:神奈川県横浜市
   <li>物件種別:売地
   <li>価格:400万円
   <li>敷地面積:150.00m2
   <li><img src="abc.jpg" alt="写真">
   <li>お勧め物件です。
  </ol>
 </li>
 
 <li>
  <ol>
   <li>物件48
   <li>場所:神奈川県西区
   <li>物件種別:マンション
   <li>価格:1400万円
   <li>敷地面積:150.00m2
   <li><img src="abc.jpg" alt="写真">
   <li>なにより見えない人には、格安物件です
  </ol>
 </li>
</ul>

<script>
function find (_, n) {
 var e = this;
 var d = this.ownerDocument;
 var v = e.value;
 var r, l;

 if (v && n) {
  l = d.querySelectorAll ('#BUKKEN > li > ol > li:nth-of-type(' + n + ')');
  switch (n) {
  case 2 : case 3 :
   r = Array.prototype.filter.call (l, function (e) {
       return this.test (e.textContent) }, new RegExp (v));
   break;
  
  case 4: //case4は価格
   var t = v.split (',');  //varの追加
   r = Array.prototype.filter.call (l, function (e) {
      var n, m;
      if (n = e.textContent.match (/(\d+)/)) {
       m = +n[1];
       if (this.min <= m && m < this.max) {
        return true;
       }
      }
     }, {min: +t[0], max: +t[1]});
   break;
  }

  if (r)
   Array.prototype.forEach.call (d.querySelectorAll ('#BUKKEN > li'),
    function (e) { if (-1 == this.indexOf (e)) e.style.display = 'none'; },
     r.map (function (e) { return e.parentNode.parentNode; }));
 }
}

function find2 () {
 allDisp ();
 [3,2,4].forEach (
  function (n, i) { find.call (this[i], null, n); },
  document.querySelectorAll ('#kensaku select[name^="sel_"]')
 );
}

function allDisp () {
 Array.prototype.forEach.call (
  document.querySelectorAll ('#BUKKEN > li'),
  function (e) { e.style.display = 'list-item'; }
 );
}

</script>

しつもんしゃさんがじぶんでかいておいた、div#kensaku ようそをかってにけすからうごかないのさ。
もじすうせいげんがあるから、みじかくかいたために、りかいしにくいですね。では!

<!DOCTYPE html>
<html lang="ja">
<head>
 <title>Test</title>
 <meta charset="utf-8">
 <style>
#BUKKEN, #BUKKEN ol {
 list-style :none;
 margin: 1em 0;
 padding : 0;
}

#BUKKEN li > ol > li:nth-of-type(1) {
 border-bottom : 2px blue solid;
 font-size: x-large;
 width:200px;
 color:#080;
 margi...続きを読む

Qサイトに条件検索のシステムを組み込みたい

自分のサイトに、料理レシピのサイトとかにある、条件を指定して検索する機能を持たせたいのですが、知識やソフトウェア等、なにが必要になるのでしょうか?
また、それらを分かりやすく解説したページ等教えていただければ幸いです。

Aベストアンサー

http://www.db-st.jp/design/
データベースのサービスを利用する
または CGIやPHPを設置する
これは比較的利用しやすいものだと思います
http://sitemix.jp/ 無料サーバにも設置できます

http://www.publickey1.jp/blog/10/cleardb.html
http://www.publickey1.jp/blog/10/databasecomdreamforce_10.html
http://ohh.sisos.co.jp/ohh/faq/index.htm
http://japan.internet.com/busnews/20120727/2.html
http://s-ej.com/sample/ajax/ajax0003/
1000件以内で検索のみならJavascriptも利用できます

分かりにくい場合は詳しく説明します 補足を

Qチェックボックスから複数のvalueを取り出す

HTMLフォームから、action="file.php"でデータの受け渡し→PHPで送られてきたvalueに応じて文章を出力、というプログラムを作っています。

例:
グループAのラジオボタン1にチェック、送信
→グループAで押されたラジオボタンを送信されたvalueで判別、この場合はvalue==A
→value==Aの場合に表示する文章を変数に受け渡し、その変数で表示

ラジオボタン、テキストボックスのvalueは$_POST['XXX']で取り出せたのですが、チェックボックスのデータだけが取り出せません。こちらの質問を検索したとき、多次元配列という言葉を見かけたのですが、いまいちよく分かりませんでした。
チェックボックスの複数のvalueで、上記の例のような動きを実現させるにはどうしたらいいでしょうか。どなたかご教授ください。

Aベストアンサー

チェックボックスはちょっと特殊

まずHTML部分で、以下のように定義します
<input type="checkbox" name="sample[]" value="test1">test1
<input type="checkbox" name="sample[]" value="test2">test2

ここでは、nameの部分に[]をつけるのがポイント


次にphpで受け取る方法として、
$sample = $_POST["sample"];
で問題ありません。

受け取ったデータを使うときは、$sampleは配列になっていますので、
仮に上記のtest1とtest2両方にチェックが付いているとしたら、
$sample[0]にはtest1が、$sample[1]にはtest2が入っています。

$sampleをforeachで使うか、$sampleのデータ数を調べてforでループさせるなどで使えます。

Qボタンを横に並べて表示させる方法

<input type="button"> ←このボタンを、並べて表示させるにはどうしたら良いでしょうか? (tableは使わない方法で) よろしくお願いいたします

Aベストアンサー

ソースをください。

inputはインライン要素なので改行は入らないです。

QjQueryで、複数条件の絞り込み機能

jQueryを使って、複数条件の絞り込み機能を作っています。
試行錯誤の末( かなり素人的な考え方ですが )1条件ずつの絞り込みは、以下の仕組みで実装できました。しかし、複数選択の絞り込みの仕組みが難しく、壁にぶつかっております。どのようにするとよいのでしょうか?ご教授おねがいいたします。

<script>
$(function() {

// サイズの絞り込み
$('.all').click(function(){ $('.all').hide(); $('.all').fadeIn(); });
$('.large').click(function(){ $('.all').hide(); $('.large').fadeIn(); });
$('.medium').click(function(){ $('.all').hide(); $('.medium').fadeIn(); });
$('.small').click(function(){ $('.all').hide(); $('.small').fadeIn(); });

// 種類の絞り込み
$('#fruits').change(function(){ $('.all').hide(); $($(this).val()).fadeIn(); });

});
</script>


<ul id="size">
<li><a class="all">全て</a></li>
<li><a class="large">大</a></li>
<li><a class="small">小</a></li>
</ul>

<select id="fruits">
<option value=".all">全て</option>
<option value=".ringo">りんご</option>
<option value=".banana">バナナ</option>
</select>

<div class="ringo large all">りんご(大)</div>
<div class="ringo small all">りんご(小)</div>
<div class="banana large all">バナナ(大)</div>
<div class="banana small all">バナナ(小)</div>

jQueryを使って、複数条件の絞り込み機能を作っています。
試行錯誤の末( かなり素人的な考え方ですが )1条件ずつの絞り込みは、以下の仕組みで実装できました。しかし、複数選択の絞り込みの仕組みが難しく、壁にぶつかっております。どのようにするとよいのでしょうか?ご教授おねがいいたします。

<script>
$(function() {

// サイズの絞り込み
$('.all').click(function(){ $('.all').hide(); $('.all').fadeIn(); });
$('.large').click(function(){ $('.all').hide(); $('.large').fadeIn(); ...続きを読む

Aベストアンサー

こんにちは

ご提示の雰囲気だと、「絞り込み」というよりも「and検索」として考えれば、1条件とか絞り込みとか考えずに全部同じ処理でできそうに思いますが、私が勘違いしてるのかしら・・・

クラスを利用して選別なさろうとしていると思いますが、allがsizeなのかfruitsなのか判然としないので混乱の元になりそうな気がします。
また、直接は関係ありませんが、$('.all').hide();としているので、サイズ指定用の表示の「全て」の文字まで消えてしまいますね。

条件指定がリストのクリックとセレクトでの選択という異なる方法を使っているところも謎です。
想像するところ、それぞれの指定(選択)条件は、他方を変えた時も生きているものとして考えて良いのですよね?
セレクト要素のほうは選択した内容が表示されるのでよいのですが、サイズの方は何を指定(クリック)したか覚えておかないと、わからなくなってしまうように思えます。


できるだけ、HTMLはそのままにすることにして・・・
 ・データ部分を明示化するためにdiv id="data"を包含要素として追加
 ・サイズで選択中のものがわかるようにclass="selected"を付与
  (仮に、CSSで選択中の項目は色が変わるようにしてあります)
の部分を変えています。

スクリプトでの処理方法はいろいろな考え方があると思いますので、あくまでも一例です。
and検索的な考え方で毎回全体から検索しなおすような考え方をしています。
条件が2個なので直接記述していますが、もっとたくさんならループで処理したほうが良いかも。
(とは言っても、この方式で条件を増やすとclassの記述が大変そうですが・・・)

(以下、インデントを全角空白にしてありますので、半角に)
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>

<style type="text/css">
#size .selected { color: #B00; }
</style>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1");</script>

<script type="text/javascript">
$(function() {
 var data = $("#data > div");
 var cnds = { size:"all", fruits:"all" };

// イベント処理を設定
 $("#size a").on("click", function(){
  $(this).parent("li").addClass("selected").siblings().removeClass("selected");
  search({ size: $(this).attr("class")});
 });
 $("#fruits").on("change", function(){ search({ fruits: this.value}); });

// 指定条件に合うものを表示
 function search(c){
  $.extend(cnds, c);
  data.hide().filter("." + cnds.size).filter("." + cnds.fruits).fadeIn();
 }
});
</script>
</head>
<body>
<ul id="size">
<li class="selected"><a class="all">全て</a></li>
<li><a class="large">大</a></li>
<li><a class="small">小</a></li>
</ul>

<select id="fruits">
<option value=".all">全て</option>
<option value=".ringo">りんご</option>
<option value=".banana">バナナ</option>
</select>

<div id="data">
<div class="ringo large all">りんご(大)</div>
<div class="ringo small all">りんご(小)</div>
<div class="banana large all">バナナ(大)</div>
<div class="banana small all">バナナ(小)</div>
</div>
</body>
</html>

こんにちは

ご提示の雰囲気だと、「絞り込み」というよりも「and検索」として考えれば、1条件とか絞り込みとか考えずに全部同じ処理でできそうに思いますが、私が勘違いしてるのかしら・・・

クラスを利用して選別なさろうとしていると思いますが、allがsizeなのかfruitsなのか判然としないので混乱の元になりそうな気がします。
また、直接は関係ありませんが、$('.all').hide();としているので、サイズ指定用の表示の「全て」の文字まで消えてしまいますね。

条件指定がリストのクリックとセレクトでの選択と...続きを読む

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qcheckboxをクリックしてリロードした際、クリックしたcheckboxのvalueの値を保持したい。

checkboxをクリックした後、リロードをしてクリックされたcheckboxのvalueの値を表示したいと思っております。
ただ、下記のソースでは動作しませんでした。
リロード時のvalueの値の引渡し方法に問題があるのだろうと思いますが、どう記述すればよいか分かりませんでした。
その為、どのような記述を行えばよいかアドバイスをいただければと思います。

【ソース】
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript">
function load() {
window.alert(value);
}
</script>
<title>title</title>
</head>

<body onload="load();">
<p>valueは1<input type="checkbox" name="checkbox1" value="1" onclick="location.reload()" onkeypress="location.reload()" /></p>
<p>valueは2<input type="checkbox" name="checkbox2" value="2" onclick="location.reload()" onkeypress="location.reload()" /></p>
<p>valueは3<input type="checkbox" name="checkbox3" value="3" onclick="location.reload()" onkeypress="location.reload()" /></p>
</body>
</html>

以上、よろしくお願いします。

checkboxをクリックした後、リロードをしてクリックされたcheckboxのvalueの値を表示したいと思っております。
ただ、下記のソースでは動作しませんでした。
リロード時のvalueの値の引渡し方法に問題があるのだろうと思いますが、どう記述すればよいか分かりませんでした。
その為、どのような記述を行えばよいかアドバイスをいただければと思います。

【ソース】
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/x...続きを読む

Aベストアンサー

ちょっと手を抜いているけど、こんな感じでいけるのでは?

<script>
window.onload=load;
function load() {
var f=document.getElementById("f0");
var v="";
var s=location.search.substr(1).split("&")
for(var i=0;i<f.length;i++){
if(f[i].type=="checkbox"){
f[i].onclick=function(){ this.form.submit(); }
f[i].onkeypress=function(){ this.form.submit(); }
for(var j in s){
if(s[j]==f[i].name+"="+f[i].value) f[i].checked=true;
}
if(f[i].checked) v+=(v==""?"":",")+f[i].value;
}
}
alert(v)
}
</script>

<form id="f0">
<p>valueは1<input type="checkbox" name="checkbox1" value="1" /></p>
<p>valueは2<input type="checkbox" name="checkbox2" value="2" /></p>
<p>valueは3<input type="checkbox" name="checkbox3" value="3" /></p>
</form>

ちょっと手を抜いているけど、こんな感じでいけるのでは?

<script>
window.onload=load;
function load() {
var f=document.getElementById("f0");
var v="";
var s=location.search.substr(1).split("&")
for(var i=0;i<f.length;i++){
if(f[i].type=="checkbox"){
f[i].onclick=function(){ this.form.submit(); }
f[i].onkeypress=function(){ this.form.submit(); }
for(var j in s){
if(s[j]==f[i].name+"="+f[i].value) f[i].checked=true;
}
...続きを読む

Qhtmlでテーブル内にテキストボックスを作りたいのですが・・・

教えてください。

2行のテーブルを作ろうとしています。
1行目が項目で
2行目が入力できるようにしたいです。

入力できるようにしたいので
テーブル内にテキストボックスを作ったのですが
どうしてもテーブルを作る囲い線と
テキストボックスの右側の間に余白ができてしまいます。

テキストボックスの下にできる余白は
<form>
<table>
</table>
</form>
という感じで、テーブルをフォームで囲むことで
無くすことができました。

HTMLでこの余白を消せる方法がありましたら
ぜひ、教えてください。
よろしくお願いしますm(__)m

Aベストアンサー

ANo.1です。
「1行目が項目で2行目が入力」という事は、tableの構成は正しくはこうでしたね。

(省略)
<tr>
<th>項目名</th>
</tr>
<tr>
<td><input type="text" size="50" maxlength="100" name="hoge01" value=""></td>
</tr>
(省略)

失礼しました。でも、この結果でも同じですよ。

ただし…仮に、「項目名」に相当するデータのボリュームが、2行目の入力フィールドの長さより相対的に長くなってしまえば、当然余白はできますが。
そういう問題ではないですよね?


人気Q&Aランキング