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

【JAVASCRIPT】チェックボックスを「全て選択」「全て解除」というのは見かけるのですが、あらかじめグループを決めてそのグループを「全て選択」するというのは可能でしょうか？可能な場合、具体的なソースをご教授ください。ズバリな回答には高ポイント＆イルカ差し上げます。


例）
検索サイトグループ／ショッピングサイトグループ／アフィリエイトグループ
□Yahoo!
□Amazon
□バリューコマース
□Google
□楽天市場
□A8
とあった場合、検索サイトグループをクリックすると、Yahoo!とGoogleが選択されるという具合です。

回答の条件
  • 1人3回まで
  • 登録：
  • 終了：2007/11/10 18:32:28
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:dacci No.4

回答回数3ベストアンサー獲得回数1

ポイント68pt

今まで回答された方とは違うアプローチですが、こんな感じでしょうか。

回答 1 の方法ですと、項目を追加した際に HTML と スクリプトの両方を変更する必要がある為、バグを生みやすくなります。

回答 2 の方法ですと、複数の項目に同じ名前 (name 属性) が与えられているため、CGI や PHP などに送った際に、意図した値が得られない可能性があります。

回答 3 の方法ですと、同じ名前が複数の項目に与えられている上に、スクリプトを input 要素に詰め込んでしまっているために、変更の必要が出た際にバグを生みやすくなります。

これらを踏まえまして、私の方法では、各チェックボックスに与えられた id の接頭辞を正規表現で判別してチェックをつけるようにしています。CGI や PHP へ送信することも想定して、各チェックボックスには name 属性も指定してあります。

<html>
<head>

<script language="JavaScript">
function selectGroup(prefix) {
    var regexp = new RegExp("^" + prefix + "_");
    var inputs = document.getElementsByTagName("input");

    for (var i = 0, l = inputs.length; i < l; i++) {
        var input = inputs[i];

        if (input.type == "checkbox" && input.id.match(regexp))
            input.checked = "checked";
    }
}
</script>

</head>

<body>

<form action="?" method="get">
<input type="button" value="検索サイトグループ" onclick="selectGroup('se');" /><br />
<input type="button" value="ショッピングサイトグループ" onclick="selectGroup('sh');" /><br />
<input type="button" value="アフィリエイトグループ" onclick="selectGroup('a');" /><br />

<input type="checkbox" id="se_yahoo" name="se_yahoo" />Yahoo!<br />
<input type="checkbox" id="sh_amazon" name="sh_amazon" />Amazon<br />
<input type="checkbox" id="a_value_c" name="a_value_c" />バリューコマース<br />
<input type="checkbox" id="se_google" name="se_google" />Google<br />
<input type="checkbox" id="sh_rakuten" name="sh_rakuten" />楽天市場<br />
<input type="checkbox" id="a_a8" name="a_a8" />A8<br />

<input type="submit" />
</form>

</body>
</html>
id:tsuntsuku

おおー、すごい。

これで他のグループと重複することができれば最高なのですが。

2007/11/10 04:04:25

その他の回答（6件）

id:t_shiono No.1

回答回数256ベストアンサー獲得回数22

ポイント60pt

特別なことはしていませんが、こんなのでどうでしょう？

<SCRIPT TYPE="text/javascript">
<!--
var group1 = Array(0, 1, 2);
var group2 = Array(3, 4, 5);
var group3 = Array(0, 5);
function BoxChecked1(check){
	var count;
	for(count = 0; count < group1.length; count++){
		document.form1.r1[group1[count]].checked = check;
	}
}
function BoxChecked2(check){
	var count;
	for(count = 0; count < group2.length; count++){
		document.form1.r1[group2[count]].checked = check;
	}
}
function BoxChecked3(check){
	var count;
	for(count = 0; count < group3.length; count++){
		document.form1.r1[group3[count]].checked = check;
	}
}
//-->
</SCRIPT>
</HEAD>
<BODY>


<FORM NAME="form1">
<INPUT TYPE="button" onClick="BoxChecked1(true);" VALUE="グループ１選択"> 
<INPUT TYPE="button" onClick="BoxChecked1(false);" VALUE="グループ１未選択">


<INPUT TYPE="button" onClick="BoxChecked2(true);" VALUE="グループ２選択"> 
<INPUT TYPE="button" onClick="BoxChecked2(false);" VALUE="グループ２未選択">


<INPUT TYPE="button" onClick="BoxChecked3(true);" VALUE="グループ３選択"> 
<INPUT TYPE="button" onClick="BoxChecked3(false);" VALUE="グループ３未選択">


<INPUT TYPE="checkbox" NAME="r1" VALUE="1">1
<INPUT TYPE="checkbox" NAME="r1" VALUE="2">2
<INPUT TYPE="checkbox" NAME="r1" VALUE="3">3
<INPUT TYPE="checkbox" NAME="r1" VALUE="4">4
<INPUT TYPE="checkbox" NAME="r1" VALUE="5">5
<INPUT TYPE="checkbox" NAME="r1" VALUE="6">6
</FORM>

チェックボックスのインデックスでグループを指定しています。

var group1 = Array(0, 1, 2);

は1、2、3番目のチェックボックスはグループ1だと指定しています。

group2、3も同様です。

また、group3のように他のグループと重複することも可能です。

id:tsuntsuku

ありがとうございます。


このほかの方法として、

<input>にidをつけて実現する方法はないでしょうか？

2007/11/10 03:18:30
id:Mook No.2

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

ポイント68pt

いろいろなやり方があるかと思いますが、name プロパティを使用してグルーピングした一例です。

<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
function checkOn( groupName ) {
    var grpcb = document.getElementsByName( groupName );
    for (i=0 ; i<grpcb.length ; i++ )
        grpcb[i].checked = true;
}
</SCRIPT>
</HEAD>
<BODY>
    <INPUT TYPE="button" VALUE="検索サイト" ONCLICK="checkOn('search');">
    <INPUT TYPE="button" VALUE="ショッピングサイト" ONCLICK="checkOn('shopping');">
    <INPUT TYPE="button" VALUE="アフェリエイトサイト" ONCLICK="checkOn('affiliate');">
    <BR><BR>
    <INPUT TYPE="checkbox" NAME="search" VALUE="1">Yahoo!<BR>
    <INPUT TYPE="checkbox" NAME="shopping" VALUE="2">Amazon<BR>
    <INPUT TYPE="checkbox" NAME="affiliate" VALUE="3">バリューコマース<BR>
    <INPUT TYPE="checkbox" NAME="search" VALUE="4">Google<BR>
    <INPUT TYPE="checkbox" NAME="shopping" VALUE="5">楽天市場<BR>
    <INPUT TYPE="checkbox" NAME="affiliate" VALUE="6">A8<BR>
</BODY>
</HTML>

http://www.tohoho-web.com/js/dom.htm#whatIs

id:tsuntsuku

ありがとうございます。


このほかの方法として、

<input>にidをつけて実現する方法はないでしょうか？

2007/11/10 03:18:39
id:dungeon-master No.3

回答回数571ベストアンサー獲得回数40

ポイント60pt

やってることは回答１と変わりませんが、ループとか使わずベタにonClickで列挙してみました。

<HTML><HEAD></head>
<body>
<form name="A" method="GET">
<input name="B" type="CHECKBOX" >リンゴ
<input name="B" type="CHECKBOX" >バナナ
<input name="B" type="CHECKBOX" >ダルマ
<input name="B" type="CHECKBOX" >ミカン
<input name="B" type="CHECKBOX" >ポスト
<BR>
<input name="X" type="BUTTON" value="くだものにチェックを追加"
onClick="with(document.A){B[0].checked=true;B[1].checked=true;B[3].checked=true;} return false;">
<input name="X" type="BUTTON" value="丸いものにチェックを追加"
onClick="with(document.A){B[0].checked=true;B[2].checked=true;B[3].checked=true;} return false;">
<input name="X" type="BUTTON" value="赤いものにチェックを追加"
onClick="with(document.A){B[0].checked=true;B[2].checked=true;B[4].checked=true;} return false;">
<input type="reset">
</form>
</body>
id:tsuntsuku

ありがとうございます。


このほかの方法として、

<input>にidをつけて実現する方法はないでしょうか？

2007/11/10 03:18:45
id:dacci No.4

回答回数3ベストアンサー獲得回数1ここでベストアンサー

ポイント68pt

今まで回答された方とは違うアプローチですが、こんな感じでしょうか。

回答 1 の方法ですと、項目を追加した際に HTML と スクリプトの両方を変更する必要がある為、バグを生みやすくなります。

回答 2 の方法ですと、複数の項目に同じ名前 (name 属性) が与えられているため、CGI や PHP などに送った際に、意図した値が得られない可能性があります。

回答 3 の方法ですと、同じ名前が複数の項目に与えられている上に、スクリプトを input 要素に詰め込んでしまっているために、変更の必要が出た際にバグを生みやすくなります。

これらを踏まえまして、私の方法では、各チェックボックスに与えられた id の接頭辞を正規表現で判別してチェックをつけるようにしています。CGI や PHP へ送信することも想定して、各チェックボックスには name 属性も指定してあります。

<html>
<head>

<script language="JavaScript">
function selectGroup(prefix) {
    var regexp = new RegExp("^" + prefix + "_");
    var inputs = document.getElementsByTagName("input");

    for (var i = 0, l = inputs.length; i < l; i++) {
        var input = inputs[i];

        if (input.type == "checkbox" && input.id.match(regexp))
            input.checked = "checked";
    }
}
</script>

</head>

<body>

<form action="?" method="get">
<input type="button" value="検索サイトグループ" onclick="selectGroup('se');" /><br />
<input type="button" value="ショッピングサイトグループ" onclick="selectGroup('sh');" /><br />
<input type="button" value="アフィリエイトグループ" onclick="selectGroup('a');" /><br />

<input type="checkbox" id="se_yahoo" name="se_yahoo" />Yahoo!<br />
<input type="checkbox" id="sh_amazon" name="sh_amazon" />Amazon<br />
<input type="checkbox" id="a_value_c" name="a_value_c" />バリューコマース<br />
<input type="checkbox" id="se_google" name="se_google" />Google<br />
<input type="checkbox" id="sh_rakuten" name="sh_rakuten" />楽天市場<br />
<input type="checkbox" id="a_a8" name="a_a8" />A8<br />

<input type="submit" />
</form>

</body>
</html>
id:tsuntsuku

おおー、すごい。

これで他のグループと重複することができれば最高なのですが。

2007/11/10 04:04:25
id:dungeon-master No.5

回答回数571ベストアンサー獲得回数40

ポイント60pt

>これで他のグループと重複することができれば最高なのですが。

dacciさまのコードを使わせていただきました。

id属性の文字の中に、指定したグループのコードが入っていればチェックを入れます。

(checkedにするところでifを分けたのは&が&amp;にされてしまうから）

<html>
<head>

<script language="JavaScript">
function selectGroup(groupid) {
    var regexp = new RegExp( groupid + "_");
    var inputs = document.getElementsByTagName("input");

    for (var i = 0, l = inputs.length; i < l; i++) {
        var input = inputs[i];

        if (input.type == "checkbox"){
           if( input.id.match(regexp)) input.checked = "checked";
        }
    }
}
</script>

</head>

<body>

<form action="?" method="get">
<input type="button" value="丸いものにチェックを追加" onclick="selectGroup('BL');" /><br />
<input type="button" value="赤いものにチェックを追加" onclick="selectGroup('RD');" /><br />
<input type="button" value="くだものにチェックを追加" onclick="selectGroup('FT');" /><br />

<input type="checkbox"  name="X" id="FT_BL_RD_" value="リンゴ"/>リンゴ<br />
<input type="checkbox"  name="X" id="BL_RD_"    value="ダルマ"/>ダルマ<br />
<input type="checkbox"  name="X" id="FT_"       value="バナナ"/>バナナ<br />
<input type="checkbox"  name="X" id="RD_"       value="ポスト"/>ポスト<br />
<input type="checkbox"  name="X" id="FT_BL_"    value="ミカン"/>ミカン<br />

<input type="reset" />
<input type="submit" />
</form>

</body>
</html>

CheckBox項目のname属性ですが、1つのパラメータとしてOn項目のValueを

リストで取得したいなら、上記のようにnameを合わせます。

それぞれのCheckBoxを個別のパラメータとして受け取ってOn/Offチェック

する場合はname属性を別にします。On/OffだけならValue属性はなくてもOK。

id:tsuntsuku

すばらしいです。

ありがとうございます！

2007/11/10 18:14:27
id:t_shiono No.6

回答回数256ベストアンサー獲得回数22

ポイント60pt

さきほどのサンプルのid版です。

<SCRIPT TYPE="text/javascript">
<!--
var group1 = Array('item0', 'item1', 'item2');
var group2 = Array('item3', 'item4', 'item5');
var group3 = Array('item0', 'item5');
function BoxChecked1(check){
	var count;
	for(count = 0; count < group1.length; count++){
		document.getElementById(group1[count]).checked = check;
	}
}
function BoxChecked2(check){
	var count;
	for(count = 0; count < group2.length; count++){
		document.getElementById(group2[count]).checked = check;
	}
}
function BoxChecked3(check){
	var count;
	for(count = 0; count < group3.length; count++){
		document.getElementById(group3[count]).checked = check;
	}
}
//-->
</SCRIPT>
</HEAD>
<BODY>


<FORM NAME="form1">
<INPUT TYPE="button" onClick="BoxChecked1(true);" VALUE="グループ１選択"> 
<INPUT TYPE="button" onClick="BoxChecked1(false);" VALUE="グループ１未選択">


<INPUT TYPE="button" onClick="BoxChecked2(true);" VALUE="グループ２選択"> 
<INPUT TYPE="button" onClick="BoxChecked2(false);" VALUE="グループ２未選択">


<INPUT TYPE="button" onClick="BoxChecked3(true);" VALUE="グループ３選択"> 
<INPUT TYPE="button" onClick="BoxChecked3(false);" VALUE="グループ３未選択">


<INPUT TYPE="checkbox" NAME="r1" VALUE="1" id="item0">1
<INPUT TYPE="checkbox" NAME="r1" VALUE="2" id="item1">2
<INPUT TYPE="checkbox" NAME="r1" VALUE="3" id="item2">3
<INPUT TYPE="checkbox" NAME="r1" VALUE="4" id="item3">4
<INPUT TYPE="checkbox" NAME="r1" VALUE="5" id="item4">5
<INPUT TYPE="checkbox" NAME="r1" VALUE="6" id="item5">6
</FORM>
id:tsuntsuku

すばらしいです。

ありがとうございます！

2007/11/10 18:14:44
id:takonixi No.7

回答回数7ベストアンサー獲得回数2

ポイント68pt

idやname属性ですとチェック以外でも使用される場面が多いかと思いますので

(nameでいえばGETやPOST値等)

id,name以外のclass名を使用してはどうでしょうか？

class名ですとスペース区切りで複数していできますので

コード上もすっきりするかと思います

<script language="javascript">
//クラス名で取得する関数
function getElementsByClassName(className) {
    var i, j, eltClass;
    var objAll = document.getElementsByTagName ? document.getElementsByTagName("*") : document.all;
    var objCN = new Array();
    for (i = 0; i < objAll.length; i++) {
        eltClass = objAll[i].className.split(/\s+/);
        for (j = 0; j < eltClass.length; j++) {
            if (eltClass[j] == className) {
                objCN.push(objAll[i]);
                break;
            }
        }
    }
    return objCN;
}
//クラス名でON/OFFを変更させる
function groupCheck(className, flg){
    var objects = getElementsByClassName(className);
    for(var i = 0;i < objects.length;i++){
        if(objects[i].type == "checkbox"){
            objects[i].checked = flg ? "checked" : "";
        }
    }
}
</script>

<input type="button" onclick="groupCheck('search',true);" value="検索サイトグループ 全て選択">
<input type="button" onclick="groupCheck('search',false);" value="検索サイトグループ 全て解除"><br />
<input type="button" onclick="groupCheck('shopping',true);" value="ショッピングサイトグループ 全て選択">
<input type="button" onclick="groupCheck('shopping',false);" value="ショッピングサイトグループ 全て解除"><br />
<input type="button" onclick="groupCheck('a',true);" value="アフィリエイトグループ 全て選択">
<input type="button" onclick="groupCheck('a',false);" value="アフィリエイトグループ 全て解除"><br />
<input type="button" onclick="groupCheck('english',true);" value="英語のタイトル 全て選択">
<input type="button" onclick="groupCheck('english',false);" value="英語のタイトル 全て解除"><br />

<input type="checkbox" name="Yahoo" class="search english">Yahoo!
<input type="checkbox" name="Amazon" class="shopping english">Amazon
<input type="checkbox" name="バリューコマース" class="a">バリューコマース
<input type="checkbox" name="Google" class="search english">Google
<input type="checkbox" name="楽天市場" class="shopping">楽天市場
<input type="checkbox" name="A8" class="a english">A8
id:tsuntsuku

すばらしいです。

ありがとうございます！

2007/11/10 18:17:02

コメント（3件)

  • id:tsuntsuku
    tsuntsuku 2007/11/10 18:35:42
    多くの方にお答えいただけると思ってなかったので、ポイント分散してしまいました。すいません。いるかも迷ったのですが、私の求めているものの元となった方に差し上げました。またよろしくお願い致します。
  • id:tsuntsuku
    tsuntsuku 2007/11/11 00:02:45
    コメント欄にまで書いていただき、本当にありがとうございます。いろんな方法があるんですねぇ・・・。JAVASCRIPTに無知な私ですがすごい勉強になりました！また質問すると思います。そのときは答えてやってください。よろしくお願いします！
  • id:Mook
    Mook 2007/11/11 10:09:43
    #2007-11-10 20:22:00 のコメントを書き直しました。
    #流れが前後してしまいますがすみません（誤記がいくつかあったので）。

    回答数が上限になっており、コメントも無効でしたので更新できませんでしたが、DOM を使用しての実装例です。
    ご要望の方法ではないかもしれませんが、こんな方法もあるというご参考までに。

    インデントのために、スペースを全角にしています。半角に変換すればIEではそのまま実行できます。
    <HTML>
    <HEAD>
    <SCRIPT TYPE="text/javascript"><!--
    // データ定義 ： グループは複数にまたがってもOK
    // データを変更するだけで、HTML は変更不要
    var cbs = Array(　　　　　　　　 //　search shopping affiliate
    　　Array( "Yahoo!",　　　　　 "sr_1", true,　false, false ),
    　　Array( "Amazon",　　　　　 "sp_1", false, true,　false ),
    　　Array( "バリューコマース", "af_1", false, false, true　),
    　　Array( "Google",　　　　　 "sr_2", true,　false, false ),
    　　Array( "楽天市場",　　　　 "sp_2", false, true,　false ),
    　　Array( "A8",　　　　　　　 "af_2", false, false, true　) );

    // 初期描画
    function draw_checkbox() {
    　　var htm = "";
    　　for ( i=0 ; i<cbs.length ; i++ ) {
    　　　　htm += '<INPUT TYPE="checkbox" NAME="' + cbs[i][1]
    　　　　　　+ '" VALUE="' + i + '">' + cbs[i][0] + "<BR>\n";
    　　}
    　　document.getElementById('CHECK_BOX_PLACE').innerHTML = htm
    }

    // グループ単位のオンオフ
    function group_check( groupNum, on_off ) {
    　　var grpcb = document.getElementsByTagName( "input" );
    　　for (i=0 ; i<grpcb.length ; i++ ) {
    　　　　for ( j=0 ; j<cbs.length ; j++ ){
    　　　　　　if ( ( grpcb[i].name == cbs[j][1] )
    　　　　　　　　 && cbs[j][ 2 + groupNum] ) { // グループのオフセット
    　　　　　　　　grpcb[i].checked = on_off;
    　　　　　　}
    　　　　}
    　　}
    }

    // --></script>
    </HEAD>
    <BODY onload="draw_checkbox();">
    　　<SPAN style="{width=100px};">グループ ON</SPAN>
    　　<INPUT TYPE="button" VALUE="検索サイト" ONCLICK="group_check(0, true);">
    　　<INPUT TYPE="button" VALUE="ショッピングサイト" ONCLICK="group_check(1, true);">
    　　<INPUT TYPE="button" VALUE="アフェリエイトサイト" ONCLICK="group_check(2, true);"><BR>
    　　<SPAN style="{width=100px};">グループ OFF</SPAN>
    　　<INPUT TYPE="button" VALUE="検索サイト" ONCLICK="group_check(0, false);">
    　　<INPUT TYPE="button" VALUE="ショッピングサイト" ONCLICK="group_check(1, false);">
    　　<INPUT TYPE="button" VALUE="アフェリエイトサイト" ONCLICK="group_check(2, false);"><BR>
    　　<BR>
    　　<DIV ID="CHECK_BOX_PLACE"></DIV>
    </BODY>
    </HTML>

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

トラックバック

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

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

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