チェックボックスの連動でJavaScriptの記述を短くしたい。

解決済

質問者：momora365
質問日時：2008/09/26 14:00
回答数：2件

【あ】、【い】という項目があり、それぞれの項目内にA、Bというチェック項目があります。
【あ】項目のAにチェックを入れると【い】のAにもチェックが入るように作りました。

以下のソースでもなんとか動くのですが、【あ】、【い】という項目が増える事とA、Bというチェック項目が増えることが判り、JavaScriptのソースを少しでも短くしたいのですが、なにか好い方法がございましたらお教え頂ければ幸です。

/************参考ソースです*****************/
<html>
<head>
<title>無題ドキュメント</title>
<script>
function check_a(){
if(document.form.a.checked==true)
{
document.form.a.checked=true;
document.form.b.checked=false;

document.form.aa.checked=true;
document.form.bb.checked=false;
}
}

function check_b(){
if(document.form.b.checked==true)
{
document.form.a.checked=false;
document.form.b.checked=true;

document.form.aa.checked=false;
document.form.bb.checked=true;
}
}

function check_aa(){
if(document.form.aa.checked==true)
{
document.form.a.checked=true;
document.form.b.checked=false;

document.form.aa.checked=true;
document.form.bb.checked=false;
}
}

function check_bb(){
if(document.form.bb.checked==true)
{
document.form.a.checked=false;
document.form.b.checked=true;

document.form.aa.checked=false;
document.form.bb.checked=true;
}
}
</script>
</head>
<body>
<form name="form">
項目【あ】
<input type="checkbox" name="a" onclick="check_a()"> A<BR>
<input type="checkbox" name="b" onclick="check_b()"> B<BR>
<br />
項目【い】
<input type="checkbox" name="aa" onclick="check_aa()"> A<BR>
<input type="checkbox" name="bb" onclick="check_bb()"> B<BR>
<br />
</form>
</body>
</html>
/*************************/
何卒、宜しくお願い申上げます。m(_ _)m

通報する

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

質問の本文を隠す

回答 (2件)

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

No.1ベストアンサー

回答者： yambejp
回答日時：2008/09/26 14:14

たとえばクラスを設定してグルーピングをするとか・・・

それとformにformという名前を付けるのはいろいろあってNG。
こんな感じでどうでしょ？

<script>
function check(obj){
var f=obj.form;
var cn=obj.className;
for(var i=0;i<f.length;i++){
if(f[i]==obj) continue;
if(f[i].type=="checkbox") f[i].checked=(cn==f[i].className);
}
}
</script>
<form>
項目【あ】<br />
<input type="checkbox" name="a" onclick="check(this)" class="a"> A<BR>
<input type="checkbox" name="b" onclick="check(this)" class="b"> B<BR>
<br />
項目【い】<br />
<input type="checkbox" name="aa" onclick="check(this)" class="a"> A<BR>
<input type="checkbox" name="bb" onclick="check(this)" class="b"> B<BR>
<br />
</form>

- 0
- 件

通報する

この回答へのお礼

yambejp様へ
早々にご回答頂き感謝です！

スタイルシートのclassタグでチェックさせるなんて素晴らしいアイデアで
自分には一生考えつかない方法だと思います。

＞それとformにformという名前を付けるのはいろいろあってNG。

今まで、ご指摘頂くまで普通にそのように名前付けていました。
これから過去に作ったものも変更していきたいと思います。

また、お教え頂いた方法でうまくいきました！

ソースまで作って頂き親切に教えて頂き本当にありがとうございました。m(_ _)m

自分もyambejp様みたいに、誰かに教えてあげられるように頑張りたいと思います。

通報する

お礼日時：2008/09/26 15:37

No.2

回答者： noname#176215
回答日時：2008/09/26 15:29

classNameで指定するとブラウザによって認識しなくなります。

<html>
<head>
<title>無題ドキュメント</title>
<script>
function grpCheck(myId){
if(document.getElementById){
frmObj = document.getElementById("Form1");
inpObj = frmObj.document.getElementById(myId);
inpTags = frmObj.getElementsByTagName("input");

if(inpObj.checked){
for(var i = 0; i < inpTags.length; i++){
if(inpTags(i).id.charAt(0) == myId.charAt(0)){
inpTags(i).checked = true;
}
}
}
}
}
</script>
</head>
<body>
<form id="Form1">
項目【あ
<input type="checkbox" id="A-a" onclick="grpCheck(this.id)"> A<br />
<input type="checkbox" id="B-a" onclick="grpCheck(this.id)"> B<br />
<br />項目【い
<input type="checkbox" id="A-b" onclick="grpCheck(this.id)"> A<br />
<input type="checkbox" id="B-b" onclick="grpCheck(this.id)"> B<br />
<br />
</form>
</body>
</html>

こんな感じでグループ分けしたらどうでしょう。

- 0
- 件

通報する

この回答へのお礼

Chiquilin様へ

ソースまで示して頂き大変丁寧にご回答頂き感謝です。
ありがとうございました！m(_ _)m

＞classNameで指定するとブラウザによって認識しなくなります。
そうだったのですか、知りませんでした。貴重な情報感謝です。

yambejp様が示してくださったソースでIE6,IE7、Firefoxなどで正常に機能して
おりますので、今回の所はyambejp様の方法で作ってみたいと考えています。

他のブラウザで不具合があればChiquilin様のソースを参考にさせていただきます。

Chiquilin様やyambejp様のような方が居てくれることになんだか感動しています。　インターネットで自分も人助けできるようにがんばりたいです！

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