JavaScriptでチェックボックスの全て選択・解除と入力制限


□A(親) □A-1(子) □A-2 □A-3
□B(親) □B-1(子) □B-2 □B-3
□C(親) □C-1(子) □C-2 □C-3
とあり、

1:いずれかをチェック→他が選択不可に
 A[□]□□■
 B[□]□□□ 選択不可に
 C[□]□□□ 選択不可に

2:親を選択すると全選択に(かつ他は選択不可)
 A[■]■■■(全選択)
 B[□]□□□ 選択不可に
 C[□]□□□ 選択不可に

3:全選択で子を1つ外すと、親の選択解除
 A[□]■□■
 B[□]□□□ 選択不可のまま
 C[□]□□□ 選択不可のまま

という、全選択・全解除と入力制限を合わせたものが実装できません。

HTMLは下記のようなものを用意しています。(idとclassは現在は付けていません。)
<input type="checkbox" name="cat10" value="1" />カテA
<input type="checkbox" name="cat11" value="1" />カテA-1
・・・

全選択・解除については下記を参考にいたしました。
http://www.miklabo.com/web/js/js_check.php

時間がなく、困っております。
よろしくお願いいたします。

回答の条件
  • 1人3回まで
  • 登録:2009/10/25 14:53:10
  • 終了:2009/10/25 17:25:26

ベストアンサー

id:makeworld No.2

makeworld回答回数75ベストアンサー獲得回数232009/10/25 17:00:30

ポイント250pt

こんな感じでしょうか。

<html>
<head>
<title>checkbox sample</title>
<script type="text/javascript" language="javascript">
<!--
function update_cbp(num) {
  var obj;

  var n = 1;
  var v = document.getElementsByName("cat" + num + "0").item(0).checked;
  while (obj = document.getElementsByName("cat" + num + n).item(0)) {
    if (obj.type == "checkbox") {
      obj.checked = v;
    }
    n++;
  }

  var p = 1;
  while (document.getElementsByName("cat" + p + "0").item(0)) {
    n = 0;
    while (obj = document.getElementsByName("cat" + p + n).item(0)) {
      if (p == num) obj.disabled = false;
      else obj.disabled = v;
      n++;
    }
    p++;
  }
}

function update_cbc(num) {
  var obj;

  var n = 1;
  var v = true;
  var e = true;
  while (obj = document.getElementsByName("cat" + num + n).item(0)) {
    if (obj.type == "checkbox") {
      if (!obj.checked) v = false;
      else e = false;
    }
    n++;
  }
  document.getElementsByName("cat" + num + "0").item(0).checked = v;

  var p = 1;
  while (document.getElementsByName("cat" + p + "0").item(0)) {
    n = 0;
    while (obj = document.getElementsByName("cat" + p + n).item(0)) {
      if (p == num) obj.disabled = false;
      else obj.disabled = !e;
      n++;
    }
    p++
  }
}
</script>
</head>
<body>
<form>
<label><input type="checkbox" name="cat10" onClick="update_cbp(1)" value="1" />カテA</label>
<label><input type="checkbox" name="cat11" onClick="update_cbc(1)" value="1" />カテA-1</label>
<label><input type="checkbox" name="cat12" onClick="update_cbc(1)" value="1" />カテA-2</label>
<label><input type="checkbox" name="cat13" onClick="update_cbc(1)" value="1" />カテA-3</label>
<br />
<label><input type="checkbox" name="cat20" onClick="update_cbp(2)" value="1" />カテB</label>
<label><input type="checkbox" name="cat21" onClick="update_cbc(2)" value="1" />カテB-1</label>
<label><input type="checkbox" name="cat22" onClick="update_cbc(2)" value="1" />カテB-2</label>
<label><input type="checkbox" name="cat23" onClick="update_cbc(2)" value="1" />カテB-3</label>
<br />
<label><input type="checkbox" name="cat30" onClick="update_cbp(3)" value="1" />カテC</label>
<label><input type="checkbox" name="cat31" onClick="update_cbc(3)" value="1" />カテC-1</label>
<label><input type="checkbox" name="cat32" onClick="update_cbc(3)" value="1" />カテC-2</label>
<label><input type="checkbox" name="cat33" onClick="update_cbc(3)" value="1" />カテC-3</label>
<br />

</form>
</body>
</html>
id:script_rk

こちらで出来ました!

ありがとうございます<m(__)m>

制作途中のものに実装しても完璧動作いたしました。

本当にありがとうございます。

2009/10/25 17:24:31

その他の回答(1件)

id:Mook No.1

Mook回答回数1312ベストアンサー獲得回数3912009/10/25 16:48:17

ポイント150pt

とりあえず書かれている使用で動作するようにしましたので、未定義の部分は未検証ですが

<html>
<head>
<script type="text/javascript">

function init() {
    var cbs = document.getElementsByTagName('input');
    for ( var i = 0 ;  i < cbs.length ; i++) {
        if( cbs[i].name.substring(1,2) == "0" ) {
            cbs[i].onclick = checkAll;
        } else {
            cbs[i].onclick = checkOff;
        }
    }

// 親の処理
    function checkAll() {
        var cbs = document.getElementsByTagName('input');
        var group = this.name.substring(0,1);
        var num   = this.name.substring(1,2);
        for ( var i = 0 ;  i < cbs.length ; i++) {
            var eg = cbs[i].name.substring(0,1);
            var en = cbs[i].name.substring(1,2);
            if ( eg == group ) {
                if( num != en )
                    cbs[i].checked = this.checked;
            } else {
                if( this.checked == true )
                    cbs[i].disabled = true;
                else
                    cbs[i].disabled = false;
            }
        }
    }

// 子の処理
    function checkOff() {
        var cbs = document.getElementsByTagName('input');
        var group = this.name.substring(0,1);
        var num   = this.name.substring(1,2);
        for ( var i = 0 ;  i < cbs.length ; i++) {
            var eg = cbs[i].name.substring(0,1);
            var en = cbs[i].name.substring(1,2);
            if( eg == group && en == "0" ) cbs[i].checked = false;
            if( eg != group ) cbs[i].disabled = true;
        }
    }
}
</script>
</head>
<body onload="init()">
<a></a>
    <input type="checkbox" name="A0">A(親)
    <input type="checkbox" name="A1">A-1(子)
    <input type="checkbox" name="A2">A-2
    <input type="checkbox" name="A3">A-3</BR>

    <input type="checkbox" name="B0">B(親)
    <input type="checkbox" name="B1">B-1(子)
    <input type="checkbox" name="B2">B-2
    <input type="checkbox" name="B3">B-3</BR>

    <input type="checkbox" name="C0">C(親)
    <input type="checkbox" name="C1">C-1(子)
    <input type="checkbox" name="C2">C-2
    <input type="checkbox" name="C3">C-3</BR>
</body>
</html>

のような感じでどうでしょうか。


細かい使用の変更は各関数で調整可能だと思います。

不明な点はコメントに手対応しますので、有効にお願いします。

id:script_rk

こちらで出来ました!

ありがとうございます<m(__)m>

ただ、別のスクリプトでbody onloadを使用していたので、一応2番の方のを採用させて頂きました。

ありがとうございました!

2009/10/25 17:23:57
id:makeworld No.2

makeworld回答回数75ベストアンサー獲得回数232009/10/25 17:00:30ここでベストアンサー

ポイント250pt

こんな感じでしょうか。

<html>
<head>
<title>checkbox sample</title>
<script type="text/javascript" language="javascript">
<!--
function update_cbp(num) {
  var obj;

  var n = 1;
  var v = document.getElementsByName("cat" + num + "0").item(0).checked;
  while (obj = document.getElementsByName("cat" + num + n).item(0)) {
    if (obj.type == "checkbox") {
      obj.checked = v;
    }
    n++;
  }

  var p = 1;
  while (document.getElementsByName("cat" + p + "0").item(0)) {
    n = 0;
    while (obj = document.getElementsByName("cat" + p + n).item(0)) {
      if (p == num) obj.disabled = false;
      else obj.disabled = v;
      n++;
    }
    p++;
  }
}

function update_cbc(num) {
  var obj;

  var n = 1;
  var v = true;
  var e = true;
  while (obj = document.getElementsByName("cat" + num + n).item(0)) {
    if (obj.type == "checkbox") {
      if (!obj.checked) v = false;
      else e = false;
    }
    n++;
  }
  document.getElementsByName("cat" + num + "0").item(0).checked = v;

  var p = 1;
  while (document.getElementsByName("cat" + p + "0").item(0)) {
    n = 0;
    while (obj = document.getElementsByName("cat" + p + n).item(0)) {
      if (p == num) obj.disabled = false;
      else obj.disabled = !e;
      n++;
    }
    p++
  }
}
</script>
</head>
<body>
<form>
<label><input type="checkbox" name="cat10" onClick="update_cbp(1)" value="1" />カテA</label>
<label><input type="checkbox" name="cat11" onClick="update_cbc(1)" value="1" />カテA-1</label>
<label><input type="checkbox" name="cat12" onClick="update_cbc(1)" value="1" />カテA-2</label>
<label><input type="checkbox" name="cat13" onClick="update_cbc(1)" value="1" />カテA-3</label>
<br />
<label><input type="checkbox" name="cat20" onClick="update_cbp(2)" value="1" />カテB</label>
<label><input type="checkbox" name="cat21" onClick="update_cbc(2)" value="1" />カテB-1</label>
<label><input type="checkbox" name="cat22" onClick="update_cbc(2)" value="1" />カテB-2</label>
<label><input type="checkbox" name="cat23" onClick="update_cbc(2)" value="1" />カテB-3</label>
<br />
<label><input type="checkbox" name="cat30" onClick="update_cbp(3)" value="1" />カテC</label>
<label><input type="checkbox" name="cat31" onClick="update_cbc(3)" value="1" />カテC-1</label>
<label><input type="checkbox" name="cat32" onClick="update_cbc(3)" value="1" />カテC-2</label>
<label><input type="checkbox" name="cat33" onClick="update_cbc(3)" value="1" />カテC-3</label>
<br />

</form>
</body>
</html>
id:script_rk

こちらで出来ました!

ありがとうございます<m(__)m>

制作途中のものに実装しても完璧動作いたしました。

本当にありがとうございます。

2009/10/25 17:24:31

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

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

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

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

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