javascript checkbox

解決済

質問者：ke---ta
質問日時：2008/12/23 02:27
回答数：8件

完全に初心者です。。
下記のスクリプトをもとに、
■チェック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>

通報する

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

質問の本文を隠す

回答 (8件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： _pipi_
回答日時：2008/12/23 21:57

<!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>

- 0
- 件

通報する

この回答へのお礼

本当にいろいろありがとうございました☆
尊敬です！！
俺もpipiさんみたいになれるように頑張ります♪♪

通報する

お礼日時：2008/12/23 22:26

No.8

回答者： _pipi_
回答日時：2008/12/25 09:36

そして再考しました。

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>

- 0
- 件

通報する

No.7

回答者： yuu_x
回答日時：2008/12/25 00:58

この辺はまだ調べ方が足りませんが

obj.from[n] は JS の性質を考えるとあまりしないほうがいいかもしれません。

obj.form.elements.item(n)
elements は name でも、index でもどちらでもアクセスできる仕様になっているはずです。

それから、要素を無効にする手段ですが、return false などでデフォルト動作を切ってしまうより、 disabled でユーザーに対して使用不可であることを知らせたほうが良いと思います。

disabled は、チェック無効にするとともに値の送出も無効にする。それを考えると return false か、

理由がない限り、無効にしないほうがよいと思います。

- 0
- 件

通報する

No.6

回答者： _pipi_
回答日時：2008/12/24 13:34

ご指摘ありがとうございます。

でっ、自分なりに考えました。
不透明なオブジェクトをかぶせてみました！
<!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>

- 0
- 件

通報する

No.5

回答者： yambejp
回答日時：2008/12/24 11:28

いくつか・・・

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の回答で十分かと。

- 0
- 件

通報する

No.4

回答者： _pipi_
回答日時：2008/12/23 21:59

そうそう

＞form1.elements[・・・]
ってあったけど、おすすめできないかも！
さっきのやつなら、数も関係ないし

- 0
- 件

通報する

No.2

回答者： _pipi_
回答日時：2008/12/23 08:33

きっと書き忘れだと思うけど

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[・・・]　で作っていただけたらと思います。。本当にわがままですいません。。

補足日時：2008/12/23 16:17

通報する

- 0
- 件

通報する

No.1

回答者： yambejp
回答日時：2008/12/23 02:42

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>