- 締切済み
複数のチェックボックス項目があり、そのチェック状態によって
複数のチェックボックス項目があり、そのチェック状態によって 処理を分岐したいのですが、スマートな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"){ 実行内容 } } こんな感じなのですが、 実際にはチェックボックスの値は配列になるのでこのスクリプトでは動かない点と 効率よく複数のチェックボックスの選択結果を判定して、スクリプトを実行する 組み方があればご教授ください。 実行結果は、データが格納された配列の中から、選択項目に対応したデータを 表示するようにしたいのです。 よろしくお願いします。
- damdamsato
- お礼率9% (1/11)
- JavaScript
- 回答数4
- ありがとう数10
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- steel_gray
- ベストアンサー率66% (1052/1578)
＞組み合わせのパターンを最初から設定しておく 組み合わせのパターンというか、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')) { ～処理～ } とする必要があるかもしれません。
- steel_gray
- ベストアンサー率66% (1052/1578)
とりあえず条件を分りやすくコーディングできるようにしてみたけど、 キカイ的になりすぎて応用は効かないかもしれない。 <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くらいに なりそうなので、かなり厳しくなりそうです。 そのあたりを効率化できる方法があれば助かります。
- fujillin
- ベストアンサー率61% (1594/2576)
＞同項目では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"> <!-- function check(f) { var e, i = 0, elm = f.elements, result = []; while ( e = elm[i++]) if (e.type == "checkbox" && e.checked) result[e.name] = true; //以下、結果確認用表示 var m=""; for (i in result) m += ", " + i; alert(m.substr(2)); } //--> </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代で音楽好きの女性」を選ぶというようなイメージです。 よろしくお願い致します。
- babu_baboo
- ベストアンサー率51% (268/525)
まずちぇっくぼっくすをあつめる そいつらをる～ぷして、えらばれているか、しらべる。 そのときに、びっとしふとして、すうちかしてみる ３０こ、くらいにしてね 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の意味がイマイチわかっていないのですが、選択されたものによって 結果の数値が変わるようなので、その数値によって、 実行内容を条件分岐するということなのでしょうか？ 質問内容がわかりづらかったので、上の回答に補足を付けましたので もし、よろしければ再考していただければ幸いです。
お礼
そういうことだったんですね。 勉強になりました。 ありがとうございます。