id:script_rk
ポイントあり400ptベストアンサーあり
インターネットウェブ制作

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 17:25:26
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:makeworld No.2

回答回数75ベストアンサー獲得回数23

ポイント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

回答回数1314ベストアンサー獲得回数393

ポイント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

回答回数75ベストアンサー獲得回数23ここでベストアンサー

ポイント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

コメント（0件)

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

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

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

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

回答リクエストを送信したユーザーはいません
ユーザー登録をして使いはじめる!無料
すでに登録されている方はこちらからログイン
この質問に含まれるキーワード
知りたいことを検索してみよう
▲ページトップへ