- ベストアンサー
javascript checkbox
完全に初心者です。。 下記のスクリプトをもとに、 ■チェックAをチェックしたら全てチェックされる ■またチェックAをチェックしたら全て外れる ようにしたいです。。 でも何がダメか分かりません。。 一部を書くのではなく出来ればスクリプト全ていただけたらと思います。 あともし宜しければチェックAをチェックしたら、１～６をチェックできないようにもしたいです。。 ご教授よろしくお願いします。。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <TITLE></TITLE> <SCRIPT language="JavaScript"> function check(){ for(i=1; i<7; i++){ document.form1.elements[ch[i]].checked = true; } } </SCRIPT> </HEAD> <BODY> 全てのチェックボックスをチェック/解除 <FORM name="form1"> <p><INPUT type="checkbox" id="ch" onclick="check()">チェックＡ</p> <INPUT type="checkbox" id="ch1">チェック１ <INPUT type="checkbox" id="ch2">チェック２ <INPUT type="checkbox" id="ch3">チェック３<BR><BR> <INPUT type="checkbox" id="ch4">チェック４ <INPUT type="checkbox" id="ch5">チェック５ <INPUT type="checkbox" id="ch6">チェック６<BR><BR> <BR> </FORM> </BODY> </HTML>
- ke---ta
- お礼率11% (3/27)
- JavaScript
- 回答数8
- ありがとう数3
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <style type="text/css"> fieldset { width:600px; margin:1em;} </style> <form> <fieldset> <legend>女性に目がいくポイント（<input type="checkbox" onClick="allchk(this,1)">すべてを選択）</legend> <input type="checkbox" id="ch00"><label for="ch00">顔</label> <input type="checkbox" id="ch01"><label for="ch01">首筋</label> <input type="checkbox" id="ch02"><label for="ch02">胸元</label> <input type="checkbox" id="ch03"><label for="ch03">腰のくびれ</label> <input type="checkbox" id="ch04"><label for="ch04">太もも</label> <input type="checkbox" id="ch05"><label for="ch05">足首</label> </fieldset> <fieldset> <legend>すれ違いざまのアクション（<input type="checkbox" onClick="allchk(this,0)">すべてを選択）</legend> <input type="checkbox" id="ch10"><label for="ch10">触れる</label> <input type="checkbox" id="ch11"><label for="ch11">クドク</label> <input type="checkbox" id="ch12"><label for="ch12">ガン見</label> <input type="checkbox" id="ch13"><label for="ch13">ちら見くびれ</label> <input type="checkbox" id="ch14"><label for="ch14">無視</label> <input type="checkbox" id="ch15"><label for="ch15">後姿をまじまじと</label> </fieldset> <hr> <div> <p> <input type="checkbox" onClick="allchk(this,0)">すべてを選択 すべてのチェックさせるきっかけのタグは、<p>のようなタグで囲む。<br> そしてチェックさせたいものはすべて、その親の<div>で囲むことが条件。 </p> <input type="checkbox" id="ch20"><label for="ch20">触れる</label> <input type="checkbox" id="ch21"><label for="ch21">クドク</label> <input type="checkbox" id="ch22"><label for="ch22">ガン見</label> <input type="checkbox" id="ch23"><label for="ch23">ちら見くびれ</label> <input type="checkbox" id="ch24"><label for="ch24">無視</label> <input type="checkbox" id="ch25"><label for="ch25">後姿をまじまじと</label> </div> </form> <script type="text/javascript"> function allchk(element, flag){ var objs = element.parentNode.parentNode.getElementsByTagName('input'); var i=0,o,v; while( o=objs[i++] ) if( o.type == 'checkbox' && o != element ){ v = element.checked; o.checked = v; o.disabled = flag? v: false; } } </script>
その他の回答 (7)
そして再考しました。cssを(class="xxx")を利用しています <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <style type="text/css"> fieldset { width:600px; margin:1em;} </style> <form> <fieldset> <legend>女性に目がいくポイント（<input type="checkbox" class="allcheck">すべてを選択）</legend> <input type="checkbox" id="ch00" class="chk"><label for="ch00">顔</label> <input type="checkbox" id="ch01" class="chk"><label for="ch01">首筋</label> <input type="checkbox" id="ch02" class="chk"><label for="ch02">胸元</label> <input type="checkbox" id="ch03" class="chk"><label for="ch03">腰のくびれ</label> <input type="checkbox" id="ch04" class="chk"><label for="ch04">太もも</label> <input type="checkbox" id="ch05" class="chk"><label for="ch05">足首</label> </fieldset> </form> <hr> <div> ※<input type="checkbox" class="allcheck">すべてを選択（ <input type="checkbox" id="ch10" class="chk"><label for="ch10">顔</label> <input type="checkbox" id="ch11" class="chk"><label for="ch11">首筋</label> <input type="checkbox" id="ch12" class="chk"><label for="ch12">胸元</label> <input type="checkbox" id="ch13" class="chk"><label for="ch13">腰のくびれ</label> <input type="checkbox" id="ch14" class="chk"><label for="ch14">太もも</label> <input type="checkbox" id="ch15" class="chk"><label for="ch15">足首</label> ） </div> <script type="text/javascript"> document.body./*@cc_on @if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'click', function(evt){ var element = evt.target || evt.srcElement; var pnode = parentSearch( element, 'FIELDSET' ) || parentSearch( element, 'DIV' ); if(!pnode) return; var chkboxs = pnode.getElementsByTagName('input'); var i=0,o,t; if( element.className.match(/\ballcheck\b/) ) while( o=chkboxs[i++] ) if(o!=element) o.checked = element.checked; if( element.className.match(/\bchk\b/) ){ while( o=chkboxs[i++] ) if( o.className && o.className.match(/\ballcheck\b/) ) t=o.checked; if(t){ element.checked = t; alert('すべてを選択がチェックされているため変更できません'); } } }, false); function parentSearch(elementId, tagname){ var element = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId; while( element.tagName != tagname ){ if(element.tagName == 'BODY') return false; element = element.parentNode; } return element; } </script>
- yuu_x
- ベストアンサー率52% (106/202)
この辺はまだ調べ方が足りませんが obj.from[n] は JS の性質を考えるとあまりしないほうがいいかもしれません。 obj.form.elements.item(n) elements は name でも、index でもどちらでもアクセスできる仕様になっているはずです。 それから、要素を無効にする手段ですが、return false などでデフォルト動作を切ってしまうより、 disabled でユーザーに対して使用不可であることを知らせたほうが良いと思います。 disabled は、チェック無効にするとともに値の送出も無効にする。それを考えると return false か、 理由がない限り、無効にしないほうがよいと思います。
ご指摘ありがとうございます。 でっ、自分なりに考えました。 不透明なオブジェクトをかぶせてみました！ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <style type="text/css"> fieldset { width:600px; margin:1em;} </style> <form> <fieldset> <legend>女性に目がいくポイント（<input type="checkbox" onClick="allchk(this,'ch')">すべてを選択）</legend> <div id="ch" > <input type="checkbox" id="ch00"><label for="ch00">顔</label> <input type="checkbox" id="ch01"><label for="ch01">首筋</label> <input type="checkbox" id="ch02"><label for="ch02">胸元</label> <input type="checkbox" id="ch03"><label for="ch03">腰のくびれ</label> <input type="checkbox" id="ch04"><label for="ch04">太もも</label> <input type="checkbox" id="ch05"><label for="ch05">足首</label> </div> </fieldset> </form> <script type="text/javascript"> function allchk(element, wrap){ var objs = element.parentNode.parentNode.getElementsByTagName('input'); var i=0,o,v; while( o=objs[i++] ) if( o.type == 'checkbox' && o != element ){ v = element.checked; o.checked = v; if( wrap && v){ if( !document.getElementById( wrap+'_wrap')) wrapping( wrap +'_wrap', wrap, '#fff', 50 ); else document.getElementById( wrap+'_wrap' ).style.display='block'; } else { document.getElementById( wrap+'_wrap' ).style.display='none'; } } } function wrapping( newId, elementId, backcolor, opacity ){ var element = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId; var wrap = document.createElement('div'); if( opacity == undefined ) opacity = 50; if( backcolor == undefined ) backcolor = '#ffffff'; wrap.id = newId; with( wrap.style ){ position = 'absolute'; backgroundColor = backcolor; /*@cc_on @if(1) filter = 'alpha(opacity='+ opacity+ ')'; @else @*/ MozOpacity = (opacity / 100); opacity = (opacity / 100);/*@end@*/ var b = element.getBoundingClientRect(); top = b.top + 'px'; left = b.left + 'px'; width = element.offsetWidth + 'px'; height = element.offsetHeight + 'px'; } return element.appendChild( wrap ); } </script>
- yambejp
- ベストアンサー率51% (3827/7415)
いくつか・・・ Aをチェックして、disabledをいじるのはお勧めしません。 disabledになっている時点で、意味合いとしてはチェックしている こと自体が無効であると同意です。 Aをチェックするとその他のチェックが外れないようにするのを 希望するならdisableではなくonclickでfalseを返すという処理になります。 <script type="text/javascript"> function check(obj){ var f=obj.form; for(i=0; i<f.length; i++){ if(f[i].type=="checkbox" && f[i]!=obj){ f[i].checked= obj.checked; f[i].flg= !obj.checked; f[i].onclick=function(){return this.flg;} } } } </script> <form> <p> <input type="checkbox" id="ch" onclick="check(this)"><label for="ch">チェックＡ</label> </p> <p> <input type="checkbox" id="ch1"><label for="ch1">チェック１</label> <input type="checkbox" id="ch2"><label for="ch2">チェック２</label> <input type="checkbox" id="ch3"><label for="ch3">チェック３</label> </p> <p> <input type="checkbox" id="ch4"><label for="ch4">チェック４</label> <input type="checkbox" id="ch5"><label for="ch5">チェック５</label> <input type="checkbox" id="ch6"><label for="ch6">チェック６</label> </p> </form> ただし、Aをチェックをして、すべてをチェックをしたあと、 それぞれのチェックをかえられないというのは効率的ではありません。 普通は、一つ一つチェックするのが面倒なので、一気にチェックし あとは個別で外すってのが妥当なやり方でしょう。 ってことで#1の回答で十分かと。
そうそう ＞form1.elements[・・・] ってあったけど、おすすめできないかも！ さっきのやつなら、数も関係ないし
きっと書き忘れだと思うけど if(f[i].type=="checkbox" && f[i]!=obj) f[i].checked= obj.checked; は、 if(f[i].type=="checkbox" && f[i]!=obj) f[i].disabled = f[i].checked= obj.checked; する予定だったと思うよ！
補足
yambejpさん、pipiさん本当にありがとうございます！！ 正直すごいです！！ 希望通りのご回答ありがとうございます！！ わがまま言って申し訳ないんですが、 教えていただいたのは、チェックできなくなるようになるものなんですが、 ただ、Aにチェックしたら１～６にチェックするだけのスクリプトはどんな感じになるんですか？？ 出来ましたら form1.elements[・・・] で作っていただけたらと思います。。本当にわがままですいません。。
- yambejp
- ベストアンサー率51% (3827/7415)
form1.elements[・・・]でやるならnameをつけてやるとよいでしょう まぁそれとは別にこんな感じでやると汎用性が高いかと。 <script type="text/javascript"> function check(obj){ var f=obj.form; for(i=0; i<f.length; i++){ if(f[i].type=="checkbox" && f[i]!=obj) f[i].checked= obj.checked; } } </script> <form> <p> <input type="checkbox" id="ch" onclick="check(this)"><label for="ch">チェックＡ</label> </p> <p> <input type="checkbox" id="ch1"><label for="ch1">チェック１</label> <input type="checkbox" id="ch2"><label for="ch2">チェック２</label> <input type="checkbox" id="ch3"><label for="ch3">チェック３</label> </p> <p> <input type="checkbox" id="ch4"><label for="ch4">チェック４</label> <input type="checkbox" id="ch5"><label for="ch5">チェック５</label> <input type="checkbox" id="ch6"><label for="ch6">チェック６</label> </p> </form>
お礼
本当にいろいろありがとうございました☆ 尊敬です！！ 俺もpipiさんみたいになれるように頑張ります♪♪