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

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

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

●質問者: tsuntsuku
●カテゴリ:インターネット ウェブ制作
✍キーワード:A8 Amazon Google JavaScript Yahoo!
○ 状態 :終了
└ 回答数 : 7/7件

▽最新の回答へ

1 ● t_shiono
●60ポイント

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

<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="グループ1選択"> 
<INPUT TYPE="button" onClick="BoxChecked1(false);" VALUE="グループ1未選択">

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

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

<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のように他のグループと重複することも可能です。

◎質問者からの返答

ありがとうございます。


このほかの方法として、

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


2 ● Mook
●68ポイント

いろいろなやり方があるかと思いますが、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

◎質問者からの返答

ありがとうございます。


このほかの方法として、

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


3 ● dungeon-master
●60ポイント

やってることは回答1と変わりませんが、ループとか使わずベタに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>
◎質問者からの返答

ありがとうございます。


このほかの方法として、

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


4 ● dacci
●68ポイント ベストアンサー

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

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

おおー、すごい。

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


5 ● dungeon-master
●60ポイント

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

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。

◎質問者からの返答

すばらしいです。

ありがとうございます!


1-5件表示/7件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



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