- ベストアンサー
ドロップダウンメニューで選択された内容通りにチェックを入れるJS
- ドロップダウンメニューで選択された内容に応じてチェックボックスにチェックを入れるJavaScriptの実装方法について教えてください。
- チェックボックスのnameが全てchkで始まっている場合、ドロップダウンメニューで選択された内容に応じてチェックボックスにチェックを入れるJSの作成方法を教えてください。
- HTMLのドロップダウンメニューで選択された内容に基づいて、チェックボックスにチェックを入れるJavaScriptのコードを教えてください。
- litton101
- お礼率89% (1106/1240)
- JavaScript
- 回答数13
- ありがとう数23
- みんなの回答 （13）
- 専門家の回答
質問者が選んだベストアンサー
他の方と比べたらお目汚しですが持てる知識で作ってみました。 チェックボックスの数が増えてもいいようにと思って。 長いので2つに分けます。 <script type="text/javascript"> <!-- var eChk,eChks; function sample(oSelect){ //selectされたindex値 var nIndex = oSelect.selectedIndex; //selectの親ノードpのさらに親ノードformが子要素に持つinput eChk = oSelect.parentNode.parentNode.getElementsByTagName("INPUT"); //checkboxの数 eChks = eChk.length; switch(nIndex){ case 0: chkAllOrNothing(true); break; case 1: chkAllOrNothing(false); break; case 2: chkOddOrEven(true); break; case 3: chkOddOrEven(false); break; case 4: chkEach(1,6,8); break; case 5: chkAfter(3); break; default: break; } } //boolean値をcheckboxに function chkAllOrNothing(bln){ for(var i = 0; i < eChks; i++){ if( eChk[i].type == "checkbox" ){ eChk[i].checked = bln; } } } //boolean値をchekboxに、1つ次をその逆に function chkOddOrEven(bln){ for(var i = 0; i < eChks; i+=2 ){ if( eChk[i].type == "checkbox" ){ eChk[i].checked = bln; eChk[i+1].checked = !bln; } } } //いったん全部消してから引数の番目-1をチェック function chkEach(){ chkAllOrNothing(false); var j; for(var i = 0; i < arguments.length; i++ ){ j = arguments[i] - 1; if( eChk[j].type == "checkbox" ){ eChk[j].checked = true; } } } //いったん全部消してからn-1番目以降をチェック function chkAfter(n){ chkAllOrNothing(false); for(var i = n - 1; i < eChks; i++){ if( eChk[i].type == "checkbox" ){ eChk[i].checked = true; } } } //--> </script> </head>
その他の回答 (12)
- babu_baboo
- ベストアンサー率51% (268/525)
ちょっとほそく。 その、select と checkbox のセットがふくすうひつようになったばあいは、 var fuga = hoge( 'form > input[name^="chk"][type="checkbox"]' ); var fuga2 = hoge( 'form > input[name^="chkA"][type="checkbox"]' ); var fuga3 = hoge( 'form > input[name^="chkB"][type="checkbox"]' ); とかにして、fuga2.call( this, event ) とか fuga3.call( this, event ) にして よびだしみてちょ！ zeffさんへ！ グローバルへんすうを・・・・ がんばれ～～！
- babu_baboo
- ベストアンサー率51% (268/525)
その２ ぶらうざをえらぶけど。 <!DOCTYPE html> <title></title> <body> <form action="#"> <select name="myselect" onchange="fuga.call( this, event )"> <option value="all" selected>全てにチェック</option> <option value="none">全てチェック解除</option> <option value="odd">奇数だけチェック</option> <option value="even">偶数だけチェック</option> <option value="1,6,8">1、6、8番だけチェック</option> <option value="n+4">3番以降全てチェック</option> </select> <br> <input type="checkbox" value="1" name="chk01" checked>1番<br> <input type="checkbox" value="1" name="chk02" checked>2番<br> <input type="checkbox" value="1" name="chk03" checked>3番<br> <input type="checkbox" value="1" name="chk04" checked>4番<br> <input type="checkbox" value="1" name="chk05" checked>5番<br> <input type="checkbox" value="1" name="chk06" checked>6番<br> <input type="checkbox" value="1" name="chk07" checked>7番<br> <input type="checkbox" value="1" name="chk08" checked>8番<br> <input type="checkbox" value="1" name="chk09" checked>9番<br> <input type="checkbox" value="1" name="chk10" checked>10番 </form> <script type="text/javascript"> var hoge = function ( selector ) { var loop = function ( ary, cb ) { Array.prototype.forEach.call( ary, cb ) }; var on = function (e) { e.checked = true }; var off = function (e) { e.checked = false }; return function ( ) { var targets = selector; var member = [ ]; var es; loop( document.querySelectorAll( selector + '[checked]' ), off ); if( /^[0-9, \s]+$/g.test( this.value ) && ( member = this.value.split(/[\s,]/g) ) ) { es = document.querySelectorAll( selector ); loop( member.map( function (n) { return es[ n - 1 ] } ), on ); } else { switch( this.value ) { case 'all' : break; case 'none' : targets = null; break; default : targets += ':nth-of-type(' + this.value + ')'; } targets && loop( document.querySelectorAll( targets ), on ); } }; }; var fuga = hoge( 'form > input[name^="chk"][type="checkbox"]' ); </script>
- zeff
- ベストアンサー率69% (137/198)
訂正（滝汗；； case 5: check(0,2,1,false); check(2,eChks,1,true); break;
- zeff
- ベストアンサー率69% (137/198)
こうなりゃヤケだ。厚顔無恥なzeffです。 短く出来たのでこれを最後にします。 他にもたくさん解答が付きましたし、先の自分の回答へのお礼等不要です。 ※HTMLは先の回答と同じです。 <script type="text/javascript"> <!-- var eChk,eChks; function sample(oSelect){ //selectされたindex値 var nIndex = oSelect.selectedIndex; //selectの親ノードpのさらに親ノードformが子要素に持つinput eChk = oSelect.parentNode.parentNode.getElementsByTagName("INPUT"); //checkboxの数 eChks = eChk.length; switch(nIndex){ case 0: check(0,eChks,1,true); break; case 1: check(0,eChks,1,false); break; case 2: check(0,eChks,2,true); check(1,eChks,2,false); break; case 3: check(0,eChks,2,false); check(1,eChks,2,true); break; case 4: chkEach(1,6,8); break; case 5: check(0,3,1,false); check(3,eChks,1,true); break; default: break; } } function check(start,end,add,bln){ for(var i = start; i < end; i+=add){ if( eChk[i].type == "checkbox" ){ eChk[i].checked = bln; } } } //いったん全部消してから引数の番目-1をチェック function chkEach(){ check(0,eChks,1,false); var j; for(var i = 0; i < arguments.length; i++ ){ j = arguments[i] - 1; if( eChk[j].type == "checkbox" ){ eChk[j].checked = true; } } } //--> </script> </head>
- yyr446
- ベストアンサー率65% (870/1330)
No.6回答者です。最近のjQueryはかなりおりこうなみたいで．．． <script type="text/javascript" src="jquery-1.4.2.min.js"></script> $.filter()の引数にさらにjQueryセレクターも書けるみたいで、もっと気にせず check.filter(":even").each(function(){this.checked=true;});};//偶数 check.filter(":odd").each(function(){this.checked=true;});};//奇数 check.filter(":eq(0),:eq(4),:eq(7)").each(function(){this.checked=true;});};//0,4,7 check.filter(":gt(2)").each(function(){this.checked=true;});};//2以上 もありみたいです。と密かに思っていたら、 optionのvalueにfilterを書いてそれを使うのを書いてる人が．．． さすがです。おそれいりました。
- steel_gray
- ベストアンサー率66% (1052/1578)
サンプルです。 <html> <head> <script type="text/javascript" src="jquery.js"></script> <!-- jQueryの詳細、入手先は http://semooh.jp/jquery/ --> <script type="text/javascript"> $(function(){ $('select[name=myselect]').change(function(){ $('input[name^=chk]').each(function(){ $(this).get(0).checked = false; }).filter($(this).val()).each(function(){ $(this).get(0).checked = true; }); }); $('select[name=myselect]').trigger('change'); }); </script> </head> <body> <form> <select name="myselect"> <option selected value="*">全てにチェック</option> <option value="">全てチェック解除</option> <option value=":even">奇数だけチェック</option> <option value=":odd">偶数だけチェック</option> <option value=":eq(0),:eq(5),:eq(7)">1、6、8番だけチェック</option> <option value=":gt(1)">3番以降全てチェック</option> </select> <br> <input type="checkbox" value="1" name="chk01" checked>1番<br> <input type="checkbox" value="1" name="chk02" checked>2番<br> <input type="checkbox" value="1" name="chk03" checked>3番<br> <input type="checkbox" value="1" name="chk04" checked>4番<br> <input type="checkbox" value="1" name="chk05" checked>5番<br> <input type="checkbox" value="1" name="chk06" checked>6番<br> <input type="checkbox" value="1" name="chk07" checked>7番<br> <input type="checkbox" value="1" name="chk08" checked>8番<br> <input type="checkbox" value="1" name="chk09" checked>9番<br> <input type="checkbox" value="1" name="chk10" checked>10番 </form> </body> </html>
お礼
steel_grayさん、いつもJSカテゴリなどでのご活躍、勉強させていただいてます。 せっかく皆様にご提示いただいたご回答ですから、すべてを試してから どれを本番環境に組み込もうと思っていたのですが、 実際の作業が本日になってしまったため、お礼が遅くなりましたことを まずはお詫び申し上げます。 steel_grayさんのスクリプトの短さにまずは驚きました。 また、OPTIONタグのVALUE属性内のみたこともない記述「:eq(),」なども ビビりました。 わたしは、いったいいつになればjqueryなどを使えるようになるんでしょうか。。。 ため息がでそうなほど、効率よい高度なスクリプト、今後も活用させていただきます。 ありがとうございました。
- yyr446
- ベストアンサー率65% (870/1330)
いきなりjQuery使って <script type="text/javascript"> <!-- function select_ptrn(ptn){ var patarns=[]; patarns[0]=function(check){check.each(function(){this.checked=true;});}; patarns[1]=function(check){check.each(function(){this.checked=false;});}; patarns[2]=function(check){check.filter(function(index){ if(index%2==0)return index;}).each(function(){this.checked=true;});}; patarns[3]=function(check){check.filter(function(index){ if(index%2==1)return index;}).each(function(){this.checked=true;});}; patarns[4]=function(check){check.filter(function(index){ return index==0||index==4||index==7;}).each(function(){this.checked=true;});}; patarns[5]=function(check){check.slice(2,10).each(function(){this.checked=true;});}; return patarns[ptn]; } $(function(){ $('select[name="myselect"]').change(function(){ $("select[name='myselect'] option:selected").each(function(){ $(":checkbox").each(function(){this.checked=false;}); var patrn=select_ptrn($(this).index()); (patrn)($(":checkbox")); }); }); }); // --> </script> <body> <form> <select name="myselect"> <option selected>全てにチェック</option> <option>全てチェック解除</option> <option>奇数だけチェック</option> <option>偶数だけチェック</option> <option>1、6、8番だけチェック</option> <option>3番以降全てチェック</option> </select> <br> <input type="checkbox" value="1" name="chk01" checked>1番<br> <input type="checkbox" value="1" name="chk02" checked>2番<br> <input type="checkbox" value="1" name="chk03" checked>3番<br> <input type="checkbox" value="1" name="chk04" checked>4番<br> <input type="checkbox" value="1" name="chk05" checked>5番<br> <input type="checkbox" value="1" name="chk06" checked>6番<br> <input type="checkbox" value="1" name="chk07" checked>7番<br> <input type="checkbox" value="1" name="chk08" checked>8番<br> <input type="checkbox" value="1" name="chk09" checked>9番<br> <input type="checkbox" value="1" name="chk10" checked>10番<br> </form> </body> </html> ※肝は最初のfunctionで、パターンのファンクションを返してもらって実行するところ。 jquery使うのは手抜きです。
お礼
yyr446さん、jqueryを活用しての解決方法をご提示いただき大変ありがとうございました。 せっかく皆様にご提示いただいたご回答ですから、すべてを試してから どれを本番環境に組み込もうと思っていたのですが、 実際の作業が本日になってしまったため、お礼が遅くなりましたことを まずはお詫び申し上げます。 実際に本番環境に組み込む際に、yyr446さんのご回答も大変わかりやすかったです。 チェックボックスに背番号をつけ、index=背番号という風に指定するわけですね。 これなら私程度のスキルでも使い倒せそうです。 > jquery使うのは手抜きです。 jqueryというライブラリは初めて知りましたが、なかなか これを活用するところまではスキルが追いつきません、、、、 引き続き勉強させていただきます。
- zeff
- ベストアンサー率69% (137/198)
zeffです（汗） 何度も何度もすいません。さっきの訂正は無視してください。 こう書くべきでした。i++でblnを交互に入れ替えます。 //boolean値をchekboxに、1つ次をその逆に function chkOddOrEven(bln){ for(var i = 0; i < eChks; i++ ){ if( eChk[i].type == "checkbox"){ eChk[i].checked = bln; bln = !bln; } } }
- zeff
- ベストアンサー率69% (137/198)
zeffです＾＾； 訂正。 //boolean値をchekboxに、1つ次をその逆に function chkOddOrEven(bln){ for(var i = 0; i < eChks; i+=2 ){ if( eChk[i].type == "checkbox" && eChk[i+1].type == "checkbox"){ eChk[i].checked = bln; eChk[i+1].checked = !bln; } } } かもしれません。
- 1
- 2
お礼
zeffさん、たくさんのご回答大変ありがとうございました。 せっかく皆様にご提示いただいたご回答ですから、すべてを試してから どれを本番環境に組み込もうと思っていたのですが、 実際の作業が本日になってしまったため、お礼が遅くなりましたことを まずはお詫び申し上げます。 ＃２と、＃１１でご提示いただいた実際のスクリプトですが、 動作がしっかりしていることもさることながら 「いったん全部消してからチェック」など、チェックボックスに 大して一括処理する際の考え方なども大変参考になりました。 一連のご回答を保管して、今後も参考にさせていただきます。 よりよいものにしようという、職人の執念のようなものも（？！）感じました。