- ベストアンサー
行クリックでチェックボックスをOn/Off、行全体を着色などさせたい
以下のように、１行に１チェックボックスがあります。 (1) 各行のどこかをクリックするたびにチェックボックスのON/OFFを切り替え (2) チェックボックスがONである間は、行全体の背景を黄色に塗りつぶす （チェックが解除されたら黄色着色も解除） といった動作をさせたいのですが、記述方法をご教示いただけますと幸いです。 <table> <tr> <td>1</td> <td>東京</td> <td><input type="checkbox" name="myvalue" value="1"></td> </tr> <tr> <td>2</td> <td>神奈川</td> <td><input type="checkbox" name="myvalue" value="2"></td> </tr> <tr> <td>3</td> <td>千葉</td> <td><input type="checkbox" name="myvalue" value="3"></td> </tr> </table>
- litton101
- お礼率89% (1106/1240)
- JavaScript
- 回答数6
- ありがとう数5
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
だからきっと、おれは、むだにかいとうがおおいのだろうなぁ～^^; おっちょこよいってのもかなりあるが・・・。 もうあとは、めでながれをおっておくれ！ なにがきっかけで、なにをあつめて、なにをしているのか <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>サンプル</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> .chkOn { background-color: #ff0; } .chkOff { background-color: #fff; } </style> </head> <body> <form method="post" action="sample.php"> <table border="1" cellpadding="3" style="border-collapse: collapse;"> <tr class="chkOff"> <td align="center">1</td> <td>神奈川</td> <td>かながわ</td> <td><label><input type="checkbox" name="myFlg[]" value="1"> 設定</label> </tr> <tr class="chkOff"> <td align="center">2</td> <td>千葉</td> <td>ちば</td> <td><label><input type="checkbox" name="myFlg[]" value="2"> 設定</label> </tr> </table> <input type="submit" name="exec" value="登録"> </form> <script type="text/javascript"> //@cc_on TokenList = (function ( cut, has, join ) { return function ( type ) { return { 'remove': function ( e, name ) { var keys = cut( name ); var buf = [ ], cnt, key; for( cnt = 0; key = keys[ cnt++ ]; ) ! has( e[ type ], key ) && buf.push( key ); e[ type ] = join( buf ); return buf; }, 'toggle': function ( e, name ) { var keys = cut( name ); var aBuf = [ ], dBuf = [ ]; var key, cnt; for( cnt = 0; key = keys[ cnt++ ]; ) { has( e[ type ], key ) ? dBuf.push( key ): aBuf.push( key ); } e[ type ] = join( dBuf ); if( aBuf.length ) this.remove( e, join( aBuf ) ); return e[ type ]; } }; }; })( function (s) { return ('' + s).split( /\u0020+/ ); }, function (s, n) { return -1 < ( '\u0020' + s +'\u0020' ).indexOf( '\u0020' + n + '\u0020' ); }, function (a) { return a.join( '\u0020' ); } ); var eventHandler = (function ( CSS, get, get2, rev ) { return function ( evt ) { var e = evt./*@if(1) srcElement @else@*/ target /*@end@*/; var p = get( e, 'nodeName', 'TR' ); var c; if( p ) { c = get2( p, 'name', 'myFlg[]' ); if( c.length ) { if( 'INPUT' !== e.nodeName || 'checkbox' !== e.type) rev( c ); CSS.toggle( p, 'chkOn chkOff' ); } } }; })( TokenList( 'className' ), function ( n, t, v ) { return n ? (v == n[t]) ? n: arguments.callee( n.parentNode, t, v): null; }, function ( node, type, val, depth ) { var n = node.firstChild; var d = n ? 1: 0; var buf = [ ]; var m; if( 'undefined' === typeof depth || 1 > depth ) depth = 99; while( d ) { if( n[ type ] == val ) buf.push( n ); m = n; if( d < depth && ( n = n.firstChild ) ) d += 1; else while( !( n = m.nextSibling ) && --d && (m = m.parentNode) ); } return buf; }, function ( a ) { for( var cnt = 0, o; o = a[ cnt++ ]; ) if( 'checkbox' == o.type ) o.checked = !o.checked; } ); document./*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'click', eventHandler, false ); </script> </body> </html>
その他の回答 (5)
- babu_baboo
- ベストアンサー率51% (268/525)
じょうぶな、ぷろぐらむ。 へんこうにつよい、ぷろぐらむ。 を、こころがけてはいますが、 きめうちは、よくなかったですね^^; おやをみつけるのはたやすいのですが、 こをさがしだすのはめんどうで、さけてました。 そこでかいてみました。こうりつわるそう。 だれか、すまーとにかいてくれないかしら？ (get2) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <title></title> <style type="text/css"> .chkOn { background-color: #ff0; } .chkOff { background-color: #fff; } </style> <body> <table> <tr class="chkOff"> <td>1</td> <td>東京</td> <td><input type="checkbox" name="myvalue" value="1"></td> </tr> <tr class="chkOff"> <td>2</td> <td>神奈川</td> <td><input type="checkbox" name="myvalue" value="2"></td> </tr> <tr class="chkOff"> <td>3</td> <td>千葉</td> <td><input type="checkbox" name="myvalue" value="3"></td> </tr> </table> <div id="p" class="ab ef ij">euwuiacbhuibac</div> <script type="text/javascript"> //@cc_on TokenList = (function ( cut, has, join ) { return function ( type ) { return { 'remove': function ( e, name ) { var keys = cut( name ); var buf = [ ], cnt, key; for( cnt = 0; key = keys[ cnt++ ]; ) ! has( e[ type ], key ) && buf.push( key ); e[ type ] = join( buf ); return buf; }, 'toggle': function ( e, name ) { var keys = cut( name ); var aBuf = [ ], dBuf = [ ]; var key, cnt; for( cnt = 0; key = keys[ cnt++ ]; ) { has( e[ type ], key ) ? dBuf.push( key ): aBuf.push( key ); } e[ type ] = join( dBuf ); if( aBuf.length ) this.remove( e, join( aBuf ) ); return e[ type ]; } }; }; })( function (s) { return ('' + s).split( /\u0020+/ ); }, function (s, n) { return -1 < ( '\u0020' + s +'\u0020' ).indexOf( '\u0020' + n + '\u0020' ); }, function (a) { return a.join( '\u0020' ); } ); var eventHandler = (function ( CSS, get, get2, rev ) { return function ( evt ) { var e = evt./*@if(1) srcElement @else@*/ target /*@end@*/; var p = get( e, 'nodeName', 'TR' ); if( p ) { rev( get2( p, 'name', 'myvalue' ) ); CSS.toggle( p, 'chkOn chkOff' ); } }; })( TokenList( 'className' ), function ( n, t, v ) { return n ? (v == n[t]) ? n: arguments.callee( n.parentNode, t, v): null; }, function ( node, type, val, depth ) { var n = node.firstChild; var d = n ? 1: 0; var buf = [ ]; var m; if( 'undefined' === typeof depth || 1 > depth ) depth = 99; while( d ) { if( n[ type ] == val ) buf.push( n ); m = n; if( d < depth && ( n = n.firstChild ) ) d += 1; else while( !( n = m.nextSibling ) && --d && (m = m.parentNode) ); } return buf; }, function ( a ) { for( var cnt = 0, o; o = a[ cnt++ ]; ) if( 'checkbox' == o.type ) o.checked = !o.checked; } ); document./*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'click', eventHandler, false ); </script>
お礼
babu_babooさん、たびたびのご教示ありがとうございます。 再度ご提示下さったスクリプト、そのまま試すと やはりばっちりでしたが、本番環境に入れてみると (1) セルクリックでの行着色はOKで、 (2) チェックON/OFFでの行着色の連動もOKなのですが、 (3) セルクリックでチェックON/OFFが利きません。 特にIE8がスクリプトエラーを吐くことはございません。 ええっと、本番環境は、セルが4列あるテーブルなのですが、 それがいけないのでしょうか。 すみません、訂正箇所にさっぱり見当がつかないのですが。。。 すみません、なにとぞご教示いただけますと幸いです。
- babu_baboo
- ベストアンサー率51% (268/525)
c = p.cells[2].firstChild; これが、せるの３ばんめのさいしょののーど。 なので４ばんめの、らべるの、さらに、さいしょののーどを・・・・。 いっぱいもうけたら、わけまえください^^;
- babu_baboo
- ベストアンサー率51% (268/525)
ごめん！きょうも、さえてない。。。 １のじょうけんを、みたしていませんでした。 ちょっとclassListをかきなおして tokenListもどきにしてみました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <title></title> <style type="text/css"> .chkOn { background-color: #ff0; } .chkOff { background-color: #fff; } </style> <body> <table> <tr class="chkOff"> <td>1</td> <td>東京</td> <td><input type="checkbox" name="myvalue" value="1"></td> </tr> <tr class="chkOff"> <td>2</td> <td>神奈川</td> <td><input type="checkbox" name="myvalue" value="2"></td> </tr> <tr class="chkOff"> <td>3</td> <td>千葉</td> <td><input type="checkbox" name="myvalue" value="3"></td> </tr> </table> <div id="p" class="ab ef ij">euwuiacbhuibac</div> <script type="text/javascript"> //@cc_on TokenList = (function ( cut, has, join ) { return function ( type ) { return { 'contains': function ( e, name ) { if( !has( e[ type ], name ) ) { var keys = cut( name ); var cnt, key; for( cnt = 0; key = keys[ cnt++ ]; ) if( has( e[ type ], key ) ) return false; } return true; }, 'add': function ( e, name ) { var keys = cut( name ); var buf = [ ], cnt, key; for( cnt = 0; key = keys[ cnt++ ]; ) has( e[ type ], key ) && buf.push( key ); e[ type ] = ( e[ type ] ? '\u0020': '' ) + join( buf ); return buf; }, 'remove': function ( e, name ) { var keys = cut( name ); var buf = [ ], cnt, key; for( cnt = 0; key = keys[ cnt++ ]; ) ! has( e[ type ], key ) && buf.push( key ); e[ type ] = join( buf ); return buf; }, 'toggle': function ( e, name ) { var keys = cut( name ); var aBuf = [ ], dBuf = [ ]; var key, cnt; for( cnt = 0; key = keys[ cnt++ ]; ) { has( e[ type ], key ) ? dBuf.push( key ): aBuf.push( key ); } e[ type ] = join( dBuf ); if( aBuf.length ) this.remove( e, join( aBuf ) ); return e[ type ]; }, 'length': function ( e ) { return cut( e[ type ] ).length; }, 'item': function ( e, num ) { var a = cut( e[ type ] ) || []; return 'undefined' === typeof num ? a: a[ num ]; } }; }; })( function (s) { return ('' + s).split( /\u0020+/ ); }, function (s, n) { return -1 < ( '\u0020' + s +'\u0020' ).indexOf( '\u0020' + n + '\u0020' ); }, function (a) { return a.join( '\u0020' ); } ); var eventHandler = (function ( CSS, get ) { return function ( evt ) { var e = evt./*@if(1) srcElement @else@*/ target /*@end@*/; var p = get( e, 'nodeName', 'TR' ); var c; if( p ) { c = p.cells[2].firstChild; do { if( c.nodeName == 'INPUT' && c.type=='checkbox' ) { e != c && (c.checked = !c.checked); CSS.toggle( p, 'chkOn chkOff' ); c = null; break; } c = c.nextSibiling; } while ( c ); } }; })( TokenList( 'className' ), function ( n, t, v ) { return n ? (v == n[t]) ? n: arguments.callee( n.parentNode, t, v): null; }, function ( n, t, v ) { var node = n.childNode; } ); document./*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'click', eventHandler, false ); </script> つっこみだいかんげいです。
補足
babu_babooさん、懇切丁寧にご教示いただきありがとうございます。 大変なスクリプトを書き下ろしていただき、まことに恐縮です。 （お金払わないとバチがあたりそうですね、、、） ＃３でのご提示のサンプルでは、完璧な動作確認をさせていただくことが できたのですが、本番環境に組み込んでみたところ、なぜかうごきません、、、 本番環境のソースを骨と皮だけにしてみたのが以下です。 ご提示のサンプルの<div id="p" class="ab ef ij">euwuiacbhuibac</div>だけはずしてあります。 原因お心当たりございますでしょうか。 （もちろん全角スペースはtabに置き換えてます。） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>サンプル</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="content-style-type" content="text/css"> <!--////////////////////////////////////////////////////////////--> <!--////ここに、＃３の<script>から</script>と /////////////////--> <!--//// <style>から</style>を挿入しました。 ////--> <!--////////////////////////////////////////////////////////////--> </head> <body> <form method="post" action="sample.php"> <table border="1" cellpadding="3" style="border-collapse: collapse;"> <tr class="chkOff"> <td align="center">1</td> <td>神奈川</td> <td>かながわ</td> <td><label><input type="checkbox" name="myFlg[]" value="1"> 設定</label> </tr> <tr class="chkOff"> <td align="center">2</td> <td>千葉</td> <td>ちば</td> <td><label><input type="checkbox" name="myFlg[]" value="2"> 設定</label> </tr> </table> <input type="submit" name="exec" value="登録"> </form> </body> </html>
- babu_baboo
- ベストアンサー率51% (268/525)
みじかいのなら document.onclick=function(e){ with(event.srcElement||e.target) name=='myvalue'&& parentNode.parentNode.style.backgroundColor= checked?'#ff0':''; } のはどうでしょう？ かいぎょうしなければ、１ぎょうです。 ながいほうは、TRにくらすをしていして CSS.toggle( p, 'chkOn chkOff' )で こうごにへんかんします ベータばんのひょうじだと、１ぎょうにながくかくと みためがわるいので、こまかくかいぎょうをいれました <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <title></title> <style type="text/css"> .chkOn { background-color: #ff0; } .chkOff { background-color: #fff; } </style> <body> <table> <tr class="chkOff"> <td>1</td> <td>東京</td> <td><input type="checkbox" name="myvalue" value="1"></td> </tr> <tr class="chkOff"> <td>2</td> <td>神奈川</td> <td><input type="checkbox" name="myvalue" value="2"></td> </tr> <tr class="chkOff"> <td>3</td> <td>千葉</td> <td><input type="checkbox" name="myvalue" value="3"></td> </tr> </table> <script type="text/javascript"> //@cc_on var ClassList = { 'remove' : function ( node, css ) { var keys = node.className.split( / +/ ) var str = ' ' + css + ' '; var buf = [ ], key, i; for( i = 0; key = keys[ i++ ]; ) { if( 0 > str.indexOf( ' ' + key + ' ' ) ) buf.push( key ); } node.className = buf.join( ' ' ); return buf; }, 'toggle' : function ( node, css ) { var keys = css.split( / +/ ); var str = ' ' + node.className + ' '; var buf = [ ], key, i; for( i = 0; key = keys[ i++ ]; ) { if( 0 > str.indexOf(' '+ key +' ') ) str += key + ' ' else buf.push( key ); } node.className = str; if( buf.length ) this.remove( node, buf.join( ' ' ) ); return node.className; } }; var eventHandler = (function ( CSS, get ) { return function ( evt ) { var e = evt./*@if(1) srcElement @else@*/ target /*@end@*/; var doc = e.ownerDocument || document; var p; if( e.name == 'myvalue' ) { p = get( e, 'nodeName', 'TR' ); if( p ) CSS.toggle( p, 'chkOn chkOff' ); } }; })( ClassList, function ( n, t, v ) { return n ? (v == n[t]) ? n: arguments.callee(n.parentNode, t, v): null; } ); document./*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'click', eventHandler, false ); </script>
- 4017B
- ベストアンサー率73% (1336/1814)
━━Sample::Start━━━━━━━━━━━━━━━━━━━━━━ <html> <head> <style type="text/css"> table#AA tr { background-color: #ffa; } </style> <script type="text/javascript"> <!-- checkFlag = []; var obj = ''; function test1(num){ if(num == 0){ obj = document.getElementById('AA1'); } else if(num == 1){ obj = document.getElementById('AA2'); } else if(num == 2){ obj = document.getElementById('AA3'); } if(obj && obj.style){ if(checkFlag[num]){ obj.style.backgroundColor = '#ffa'; checkFlag[num] = 0; } else{ obj.style.backgroundColor = '#faa'; checkFlag[num] = 1; } } }; //--> </script> </head> <body> <form name="form1"> <table id="AA" border="1" width="600"> <tr id="AA1"><td>1 :東京</td><td><input type="checkbox" name="myvalue" onClick="test1(0)"></input></td></tr> <tr id="AA2"><td>2 :神奈川</td><td><input type="checkbox" name="myvalue" onClick="test1(1)"></input></td></tr> <tr id="AA3"><td>3 :千葉</td><td><input type="checkbox" name="myvalue" onClick="test1(2)"></input></td></tr> </table> </form> </body> </html> ━━Sample::Endd━━━━━━━━━━━━━━━━━━━━━━━ こんな感じなるはずです？ JavaScriptでCSSを書き換えるので、ブラウザのver.がある程度新しいヤツじゃないと動作しません。 他にも方法があると思いますが、取り急ぎのサンプルとして。
お礼
4017Bさん、ご回答ありがとうございました。 チェックボックスへのチェックの有無によって 行全体が着色されるサンプルをありがとうございます。 想像以上に高度なスクリプトでした。本当に恐縮です。 ありがとうございます。
お礼
babu_babooさん、たびたびのご教示本当にありがとうございました m(_ _)m m(_ _)m m(_ _)m 本番環境でも元気に動きました。 同時に、Javascriptをこんなに自由自在に操れたら どんなにHTMLプログラミングが楽しいだろう、とも思いました。 ともかく、本件は何度も応用が利くもので大変有益なスクリプトを 組んでいただきましたので、永久保存版にさせていただきます！ 本当にありがとうございました！！ ＆今後ともよろしくお願い致します(^^;