一つのチェックボックスのON/OFFに応じて他の複数をON/OFFに

解決済

質問者：litton101
質問日時：2005/11/09 16:44
回答数：3件

昨日の質問した下記の関連で再質問です。
http://oshiete1.goo.ne.jp/kotaeru.php3?q=1765687

親１に対し、子１～４と、合計5つのチェックボックスがあり、
親のチェックOFF　⇒　子1～4をdisableに、
子のチェックON　⇒　子1～4をactive　としたいのですが、
＃４さんのご回答を適用すると、上記5つのチェックボックス以外も
全てdisableの対象になってしまいます。

他方、自分の元質問のソースを改造しようとも思いましたが、
子1～4のname属性が全て違う名前のため、そのままでは使えません。

ついでに（些細なことですが）
子1～4の全てがONにされた時に、親がOFFなら自動でONにしたいです。
テンプレートは下記ですが、よろしくお願い致します。

<html>
<head>
<script language="javascript" type="text/javascript">
// ■■■■
</script>
</head>
<body>
<form id="query" name="query">
<input type="checkbox" name="oya" value="1" checked>親
<input type="checkbox" name="ko1" id="ko1" value="1" checked>子1
<input type="checkbox" name="ko2" id="ko2" value="1" checked>子2
<input type="checkbox" name="ko3" id="ko3" value="1" checked>子3
<input type="checkbox" name="ko4" id="ko4" value="1" checked>子4
</form>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： BLUEPIXY
回答日時：2005/11/09 20:40

ソースによっては nameがko+nで１から連番になっているとかだったら単純にループで回せるかも。

------------------------------------------------------
<html>
<head>
<script language="javascript" type="text/javascript">
function autochk(p,name){
var f = p.form;
var el;
for(var prop in f){
if(prop.toString().substr(0,2)==name){//名前がname('ko')で始まるもの
el=f.elements[prop];
if(el.type=="checkbox"){//このチェックは省略してもいいかも
el.disabled = !p.checked;
}
}
}
}
</script>
</head>
<body>
<form id="query" name="query">
<input type="checkbox" name="oya" value="1" checked checked onclick="autochk(this,'ko');">親
<input type="checkbox" name="ko1" id="ko1" value="1" checked>子1
<input type="checkbox" name="ko2" id="ko2" value="1" checked>子2
<input type="checkbox" name="ko3" id="ko3" value="1" checked>子3
<input type="checkbox" name="ko4" id="ko4" value="1" checked>子4
<input type="text" name="other" value="その他">
</form>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

BLUEPIXYさん、再々のレスありがとうございます。

動作確認させていただきましたが
実にいい感じです。

name('ko')で始める件については問題ありませんので
そのように調整いたします。

通報する

お礼日時：2005/11/09 23:53

No.3

回答者： yambejp
回答日時：2005/11/09 22:59

idよりはこの場合はclassの方が使いやすくない

ですか？

<html>
<head>
<script language="javascript" type="text/javascript">
function autochk(f){
for(var i=0;i<f.form.length;i++){
if (f.form.elements[i].className=="ko"){f.form.elements[i].disabled = !f.checked;}
}
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="oya" value="1" checked onclick="autochk(this);">親
<input type="checkbox" name="ko1" class="ko" value="1" checked>子1
<input type="checkbox" name="ko2" class="ko" value="1" checked>子2
<input type="checkbox" name="ko3" class="ko" value="1" checked>子3
<input type="checkbox" name="ko4" class="ko" value="1" checked>子4
<input type="checkbox" name="other" value="1" checked>他
</form>
</body>
</html>