複数のチェックボックス項目があり、そのチェック状態によって

締切済

質問者：damdamsato
質問日時：2010/06/22 11:26
回答数：4件

複数のチェックボックス項目があり、そのチェック状態によって
処理を分岐したいのですが、スマートなjavascriptの書き方が
あれば教えてください！
【例】
<input type="checkbox" name="koumokuA" value="A1" />
<input type="checkbox" name="koumokuA" value="A2" />
<input type="checkbox" name="koumokuA" value="A3" />
<input type="checkbox" name="koumokuA" value="A4" />
<input type="checkbox" name="koumokuA" value="A5" />

<input type="checkbox" name="koumokuB" value="B1" />
<input type="checkbox" name="koumokuB" value="B2" />
<input type="checkbox" name="koumokuB" value="B3" />
<input type="checkbox" name="koumokuB" value="B4" />

<input type="checkbox" name="koumokuC" value="C1" />
<input type="checkbox" name="koumokuC" value="C2" />
<input type="checkbox" name="koumokuC" value="C3" />
<input type="checkbox" name="koumokuC" value="C4" />

もし【koumokuA】のA2とA3、【koumokuB】のB1とB4が選択された場合
同項目ではor条件、他項目ではand条件で処理したいので
考え方としては、
if(koumokuA=="A2" || koumokuA=="A3"){
if(koumokuB=="B1" || koumokuB=="B4"){
実行内容
}
}

こんな感じなのですが、
実際にはチェックボックスの値は配列になるのでこのスクリプトでは動かない点と
効率よく複数のチェックボックスの選択結果を判定して、スクリプトを実行する
組み方があればご教授ください。

実行結果は、データが格納された配列の中から、選択項目に対応したデータを
表示するようにしたいのです。

よろしくお願いします。

通報する

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

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： steel_gray
回答日時：2010/06/22 19:07

＞組み合わせのパターンを最初から設定しておく

組み合わせのパターンというか、if文で書いていた条件を直感的に記述できるようにしただけです。

if(koumokuA=="A2" || koumokuA=="A3"){
if(koumokuB=="B1" || koumokuB=="B4"){
が
'A2 A3 * B1 B4'　に相当します。

「処理」の部分がどのようなものかにもよりますが

datalistを廃止し、
for(i in datalist) {
～
}
という部分を

if(CB_check('A2 A3 * B1 B4')) {
～処理～
}
if(CB_check('A1 * B2 B3 * C1')) {
～処理～
}
とする必要があるかもしれません。

- 0
- 件

通報する

この回答へのお礼

そういうことだったんですね。
勉強になりました。
ありがとうございます。

通報する

お礼日時：2010/06/22 21:05

No.3

回答者： steel_gray
回答日時：2010/06/22 13:43

とりあえず条件を分りやすくコーディングできるようにしてみたけど、

キカイ的になりすぎて応用は効かないかもしれない。

<html>
<head>
<title></title>
<script type="text/javascript">
function sample(){
　var datalist = { // 条件　と　処理（データ？なんならfunctionを書いても。）
　　'A2 A3 * B1 B4':'処理１',
　　'A1 * B2 B3 * C1':'処理２',
　　'B1':'処理３'
　};

　var CB = {};
　var CBS = document.getElementById('checkbox').getElementsByTagName('input');
　var C;
　var i=0;
　while(C=CBS[i++]) {
　　CB[C.value] = C.checked;
　}

　for(i in datalist) {
　　if(CB_check(i)) {
　　　//ここに処理を。
　　　alert(i +'::'+datalist[i]+'実行する');
　　}
　　else alert(i +'::'+datalist[i]+'実行しない');
　}

function CB_check(str){
　str=str+' *';
　var dt=str.split(/ /);
　var flg = false;
　for(var i=0;dt[i];i++) {
　　if(dt[i] == '*') {
　　　if(! flg) return false;
　　　flg = false;
　　} else {
　　　flg |= CB[dt[i]];
　　}
　}
　return true;
}

}
</script>
</head>
<body>

<div id="checkbox">
<p>
A1<input type="checkbox" name="koumokuA" value="A1" />
A2<input type="checkbox" name="koumokuA" value="A2" />
A3<input type="checkbox" name="koumokuA" value="A3" />
A4<input type="checkbox" name="koumokuA" value="A4" />
</p><p>
B1<input type="checkbox" name="koumokuB" value="B1" />
B2<input type="checkbox" name="koumokuB" value="B2" />
B3<input type="checkbox" name="koumokuB" value="B3" />
B4<input type="checkbox" name="koumokuB" value="B4" />
</p><p>
C1<input type="checkbox" name="koumokuC" value="C1" />
C2<input type="checkbox" name="koumokuC" value="C2" />
</p>
<div>

<p>
<input type="button" value="Check" onclick="sample()" />
</p>

</body>
</html>

この回答への補足

回答ありがとうございます。

これは、組み合わせのパターンを最初から設定しておくという理解でよろしいのでしょうか？

もしそうだとすると、今回のサンプルくらいのものだと良いのですが
実際にやりたいことは、項目が10種類くらいで、それぞれに選択項目が5～10くらいに
なりそうなので、かなり厳しくなりそうです。

そのあたりを効率化できる方法があれば助かります。

補足日時：2010/06/22 17:30

通報する

- 0
- 件

通報する

No.2

回答者： fujillin
回答日時：2010/06/22 12:28

＞同項目ではor条件、他項目ではand条件で処理したいので～～

の意味が良く分かりません。
同項目ではor条件----同じ名前の項目群で一つでもチェックがあればtrue
他項目ではand条件---各項目群全てがtrueでなければfalse　ということ？
後半が本当にそういう意味か不明なので、前半の処理だけを組み込んでみました。

＞効率よく複数のチェックボックスの選択結果を判定して～～
最低1回は各要素を見る必要はあるでしょうから、結果を連想配列的に記録すればよさそう。

以下ご参考まで。（inputの数は減らしてあります）
結果（result）には、チェックのある項目名だけが残ります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">

</script>
</head>
<body>
<form>
<input type="checkbox" name="koumokuA" value="A1">A1
<input type="checkbox" name="koumokuA" value="A2">A2
<input type="checkbox" name="koumokuA" value="A3">A3

<input type="checkbox" name="koumokuB" value="B1">B1
<input type="checkbox" name="koumokuB" value="B2">B2
<input type="checkbox" name="koumokuB" value="B3">B3

<input type="checkbox" name="koumokuC" value="C1">C1
<input type="checkbox" name="koumokuC" value="C2">C2
<input type="checkbox" name="koumokuC" value="C3">C3

<button type="button" onclick="check(this.form)">check</button>
</form>
</body>
</html>

この回答への補足

具体例がないとわかりづらいですね。
申し訳ありません。

例えば、
koumokuAでは、年代（10代、20代、30代）
koumokuBでは、趣味（スポーツ、音楽、映画）
koumokuCでは、性別（男、女）

のような感じで、配列の中に個人データが入っていて、その中から
「10代～20代で音楽好きの女性」を選ぶというようなイメージです。

よろしくお願い致します。

補足日時：2010/06/22 13:16

通報する

- 0
- 件

通報する

No.1

回答者： babu_baboo
回答日時：2010/06/22 11:56

まずちぇっくぼっくすをあつめる

そいつらをる～ぷして、えらばれているか、しらべる。
そのときに、びっとしふとして、すうちかしてみる
３０こ、くらいにしてね

var chk = document.getElementsByName( 'koumokuA' );
var bit = 0;
var i = 0;
var c;

while( c = chk[ i++ ] ) bit = (bit << 1) + c.checked;

alert(bit);

この回答への補足

回答ありがとうございます。
bitの意味がイマイチわかっていないのですが、選択されたものによって
結果の数値が変わるようなので、その数値によって、
実行内容を条件分岐するということなのでしょうか？

質問内容がわかりづらかったので、上の回答に補足を付けましたので
もし、よろしければ再考していただければ幸いです。

補足日時：2010/06/22 13:25

通報する