人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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


●質問者: script_rk
●カテゴリ:インターネット ウェブ制作
✍キーワード:C-1 Class HTML JavaScript □□□
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Mook
●150ポイント

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

<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>

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


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

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

◎質問者からの返答

こちらで出来ました!

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

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

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


2 ● makeworld
●250ポイント ベストアンサー

こんな感じでしょうか。

<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>
◎質問者からの返答

こちらで出来ました!

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ