dポイントプレゼントキャンペーン実施中！

ドロップダウンメニューで選択された内容通りにチェックを入れるJS

解決済

  • 質問者：litton101
  • 質問日時：
  • 回答数：12件

ドロップダウンメニューで選択された内容通りにチェックを入れるJS
をご教示下さい。
なお、本番環境で対象とするチェックボックスのnameは、全てchkで始まっている法則性があります。

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

<html>
<head>
<script type="text/javascript">
<!--
// -->
</script>
</head>
<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番
</form>
</body>
</html>

通報する

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

質問の本文を隠す

A 回答 (12件中1～10件)

No.13

  • 回答者： babu_baboo
  • 回答日時：

ちょっとほそく。


その、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さんへ！
グローバルへんすうを・・・・
がんばれ～～！
    • good
    • 0
    • 件
通報する

No.12

  • 回答者： babu_baboo
  • 回答日時：

その２　ぶらうざをえらぶけど。



<!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>
    • good
    • 0
    • 件
通報する

No.10

  • 回答者： zeff#1
  • 回答日時：

訂正（滝汗；；



case 5:
check(0,2,1,false);
check(2,eChks,1,true);
break;
    • good
    • 0
    • 件
通報する

No.9

  • 回答者： zeff#1
  • 回答日時：

こうなりゃヤケだ。

厚顔無恥な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>
    • good
    • 0
    • 件
通報する

No.8

  • 回答者： yyr446
  • 回答日時：

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を書いてそれを使うのを書いてる人が．．．
さすがです。おそれいりました。
    • good
    • 0
    • 件
通報する

No.7

  • 回答者： steel_gray
  • 回答日時：

サンプルです。



<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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

steel_grayさん、いつもJSカテゴリなどでのご活躍、勉強させていただいてます。
せっかく皆様にご提示いただいたご回答ですから、すべてを試してから
どれを本番環境に組み込もうと思っていたのですが、
実際の作業が本日になってしまったため、お礼が遅くなりましたことを
まずはお詫び申し上げます。

steel_grayさんのスクリプトの短さにまずは驚きました。
また、OPTIONタグのVALUE属性内のみたこともない記述「:eq(),」なども
ビビりました。

わたしは、いったいいつになればjqueryなどを使えるようになるんでしょうか。。。

ため息がでそうなほど、効率よい高度なスクリプト、今後も活用させていただきます。
ありがとうございました。

通報する
お礼日時：2010/06/01 22:40

No.6

  • 回答者： yyr446
  • 回答日時：

いきなり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使うのは手抜きです。
    • good
    • 0
    • 件
通報する
この回答へのお礼

yyr446さん、jqueryを活用しての解決方法をご提示いただき大変ありがとうございました。

せっかく皆様にご提示いただいたご回答ですから、すべてを試してから
どれを本番環境に組み込もうと思っていたのですが、
実際の作業が本日になってしまったため、お礼が遅くなりましたことを
まずはお詫び申し上げます。

実際に本番環境に組み込む際に、yyr446さんのご回答も大変わかりやすかったです。
チェックボックスに背番号をつけ、index=背番号という風に指定するわけですね。
これなら私程度のスキルでも使い倒せそうです。

> jquery使うのは手抜きです。

jqueryというライブラリは初めて知りましたが、なかなか
これを活用するところまではスキルが追いつきません、、、、
引き続き勉強させていただきます。

通報する
お礼日時：2010/06/01 22:39

No.5

  • 回答者： zeff#1
  • 回答日時：

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;
}
}
}
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： zeff#1
  • 回答日時：

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;
}
}
}

かもしれません。
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： zeff#1
  • 回答日時：

zeffです。

続き。

<body>
<form name="form1" action="#">
<p>
<select name="myselect" onchange="sample(this)">
<option selected>全てにチェック</option>
<option>全てチェック解除</option>
<option>奇数だけチェック</option>
<option>偶数だけチェック</option>
<option>1、6、8番だけチェック</option>
<option>3番以降全てチェック</option>
</select>
</p>
<p><input type="checkbox" value="1" name="chk01" checked>1番</p>
<p><input type="checkbox" value="1" name="chk02" checked>2番</p>
<p><input type="checkbox" value="1" name="chk03" checked>3番</p>
<p><input type="checkbox" value="1" name="chk04" checked>4番</p>
<p><input type="checkbox" value="1" name="chk05" checked>5番</p>
<p><input type="checkbox" value="1" name="chk06" checked>6番</p>
<p><input type="checkbox" value="1" name="chk07" checked>7番</p>
<p><input type="checkbox" value="1" name="chk08" checked>8番</p>
<p><input type="checkbox" value="1" name="chk09" checked>9番</p>
<p><input type="checkbox" value="1" name="chk10" checked>10番</p>
</form>
</body>
</html>
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報