div id="root"直下の複数の子のそれぞれの要素について、それぞれの値やチェックボックスが

チェックされているかどうか、セレクトボックスから何が選択されているか
を取り出したいと考えています。

↓の例では、root直下にchild01という子が存在し、param01,param02,param03
という名前のdivの下に、チェックボックス、テキストインプット、セレクトボックスが存在
しています。

動的に増える子ノードchild01,child02,・・・について、それぞれのチェックボックス、テキスト
インプット、セレクトボックス(nameは全てのノードで同一)のチェックされているかどうか、テキストの入力値、セレクトされた
オプションの値を取得したいのですが、どう書けばいいでしょうか?
jQueryを使用して書いた方が楽であれば、そのサンプルでも構いません。

<div id="root">
<div id="child01">
<div name="param01">
 <input type="checkbox" name="example" value="チェックボックス">チェックボックス
</div>
<div name="param02">
 <input type="text" name="param0201" value="インプット!">
</div>
<div name="param03">
 <select name="param0301">
<option selected value="yes!">yes!
<option value="no!">no!
</select>
</div>
</div>
</div>

回答の条件
  • 1人2回まで
  • 登録:2008/02/11 17:30:57
  • 終了:2008/02/15 02:20:02

ベストアンサー

id:Mars No.3

Mars回答回数203ベストアンサー獲得回数202008/02/12 17:54:19

ポイント40pt

jquery使ったサンプル。

div name="paramXX" の nameは邪魔になるので

(というかdiv要素にはname属性は無いので)

消しています。


<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
	// #root 直下のdivのリスト
	var rootChilds = $("#root > div");

	// child(#0)配下のname="example"へのアクセス;
	alert( $("[@name='example']",rootChilds[0])[0].checked );

	// child(#1)配下のname属性を持つ要素(#2)へのアクセス(multipleは無いと断定)
	alert( $("[@name]",rootChilds[1])[2].value);

	// 全部
	for(var i=0;rootChilds[i];i++){
		var params = $("[@name]",rootChilds[i]);
		for(var j=0;params[j];j++){
			var result = (params[j].type && params[j].type=='checkbox')?
				params[j].checked:params[j].value;
			alert(rootChilds[i].id +'::'+
					params[j].name+'::'+result);
		}
	}
});
</script>
</head>
<body>

<div id="root">
 <div id="child01">
  <div>
   <input type="checkbox" name="example" value="チェックボックス">チェックボックス
  </div>
  <div>
   <input type="text" name="param0201" value="インプット!">
  </div>
  <div>
   <select name="param0301">
    <option selected value="yes!">yes!
    <option value="no!">no!
   </select>
  </div>
 </div>
 <div id="child02">
  <div>
   <input type="checkbox" name="example" value="チェックボックス" checked>チェックボックス
  </div>
  <div>
   <input type="text" name="param0201" value="いんぷっと">
  </div>
  <div>
   <select name="param0301">
    <option value="yes!">yes!
    <option selected value="no!">no!
   </select>
  </div>
 </div>
</div>

</body>
</html>
id:tono5652

jQueryを使うとかなりシンプルですね。助かりました。ありがとうございます。

2008/02/15 02:19:22

その他の回答(2件)

id:ardarim No.1

ardarim回答回数892ベストアンサー獲得回数1422008/02/11 18:56:31

ポイント30pt

条件どおり厳密に書くとこんな感じです。

getAllParams() で、child01,child02,…の各値を取得して、Arrayオブジェクトで返します。test()はテスト用です。

function getChildById(root, id)
{
    var i;

    for(i = 0; i < root.childNodes.length; i++){
        if(root.childNodes[i].id == id){
            return root.childNodes[i];
        }
    }

    return null;
}

function getChildByName(root, name)
{
    var i;

    for(i = 0; i < root.childNodes.length; i++){
        if(root.childNodes[i].name == name){
            return root.childNodes[i];
        }
    }

    return null;
}

function getInputValueByType(root, type)
{
    var i;
    var tagName;

    if(root == null) return null;
    tagName = (type == "select" ? "SELECT" : "INPUT");

    for(i = 0; i < root.childNodes.length; i++){
        if(root.childNodes[i].nodeName == tagName){
            if(tagName == "SELECT" || root.childNodes[i].type == type){
                if(type == "checkbox"){
                    return root.childNodes[i].checked;
                } else {
                    return root.childNodes[i].value;
                }
            }
        }
    }

    return null;
}

function getAllParams()
{
    var root = document.getElementById("root");
    var child;
    var i;
    var v, p;

    result = new Array;
    for(i = 1; ; i++){
        id = "child" + String("0" + i).slice(-2);
        child = getChildById(root, id);
        if(child == null) break;
        v = new Object;
        //
        p = getChildByName(child, "param01");
        v.param01 = getInputValueByType(p, "checkbox");
        //
        p = getChildByName(child, "param02");
        v.param02 = getInputValueByType(p, "text");
        //
        p = getChildByName(child, "param03");
        v.param03 = getInputValueByType(p, "select");

        if(v.param01 == null || v.param02 == null || v.param03 == null){
            break;
        }
        result.push(v);
    }

    return result;
}

function test()
{
    var params;
    var i, t;

    params = getAllParams();

    t = "";
    for(i = 0; i < params.length; i++){
        t = t + params[i].param01 + "/" + params[i].param02 + "/" + params[i].param03 + "\n";
    }

    alert(t);

}

rootの子ノードは必ずchildNNという名前で、必ず01,02,…の順で並んでいるなど、前提となる条件がある場合はもうちょっと簡略化できます。

id:tono5652

ありがとうございます。

このプログラムでは、Rootの子ノード(ChildNN)の子ノードのパラメタを取得していらっしゃいますよね?

サンプルのHTMLでは、Rootの子ノード(ChildNN)の子ノードはただのDIVで、さらにその子ノード(Childの孫ノード)として、inputやselectを用意しています。

なので、この場合は、さらにもう一段深いノードについてgetInputValueByTypeをしないといけないということですよね?

2008/02/11 20:01:10
id:ardarim No.2

ardarim回答回数892ベストアンサー獲得回数1422008/02/11 21:35:22

ポイント10pt

コメント欄が空いていないので追加回答します。(コメント欄を空けておくと補足ができますのであけておくほうが良いと思います)


サンプルのプログラムは、質問のHTMLと組み合わせて期待する動作をすることを確認しています。

サンプルでは、

(1)rootというidをもつノードを探す

(2)rootの子ノードで、childNNという形式のidをもつ子ノードを列挙する

(3)2の子ノードの子ノード(rootの孫ノード)で、param01、param02、param03のnameをもつ子ノードのinput/selectパラメータを取得する

という動きになっており、以下のような構造を想定しています。(サンプルHTMLと同じです)

<DIV id="root">
  <DIV id="child01">
    <DIV name="param01">
      <INPUT ...>

実際には以下のような構造ということでしょうか?

<DIV id="root">
  <DIV id="child01">
    <DIV>
      <DIV name="param01">
        <INPUT ...>

3層目のDIVが無名かどうか、3層目にはDIVが1つだけなのか/2つ以上のDIVがあるのかどうかなどでも変わってきますが、やり方としてはご指摘の通りchildNNの子ノードを取得して、そのノードに対してgetInputValueByTypeを呼び出すことになります。

id:tono5652

詳しい解説ありがとうございます。助かりました。

2008/02/15 02:19:01
id:Mars No.3

Mars回答回数203ベストアンサー獲得回数202008/02/12 17:54:19ここでベストアンサー

ポイント40pt

jquery使ったサンプル。

div name="paramXX" の nameは邪魔になるので

(というかdiv要素にはname属性は無いので)

消しています。


<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
	// #root 直下のdivのリスト
	var rootChilds = $("#root > div");

	// child(#0)配下のname="example"へのアクセス;
	alert( $("[@name='example']",rootChilds[0])[0].checked );

	// child(#1)配下のname属性を持つ要素(#2)へのアクセス(multipleは無いと断定)
	alert( $("[@name]",rootChilds[1])[2].value);

	// 全部
	for(var i=0;rootChilds[i];i++){
		var params = $("[@name]",rootChilds[i]);
		for(var j=0;params[j];j++){
			var result = (params[j].type && params[j].type=='checkbox')?
				params[j].checked:params[j].value;
			alert(rootChilds[i].id +'::'+
					params[j].name+'::'+result);
		}
	}
});
</script>
</head>
<body>

<div id="root">
 <div id="child01">
  <div>
   <input type="checkbox" name="example" value="チェックボックス">チェックボックス
  </div>
  <div>
   <input type="text" name="param0201" value="インプット!">
  </div>
  <div>
   <select name="param0301">
    <option selected value="yes!">yes!
    <option value="no!">no!
   </select>
  </div>
 </div>
 <div id="child02">
  <div>
   <input type="checkbox" name="example" value="チェックボックス" checked>チェックボックス
  </div>
  <div>
   <input type="text" name="param0201" value="いんぷっと">
  </div>
  <div>
   <select name="param0301">
    <option value="yes!">yes!
    <option selected value="no!">no!
   </select>
  </div>
 </div>
</div>

</body>
</html>
id:tono5652

jQueryを使うとかなりシンプルですね。助かりました。ありがとうございます。

2008/02/15 02:19:22

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません