行クリックでチェックボックスをOn/Off、行全体を着色などさせたい

解決済

質問者：litton101
質問日時：2009/10/17 23:58
回答数：6件

以下のように、１行に１チェックボックスがあります。

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

通報する

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

質問の本文を隠す

回答 (6件)

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

No.6ベストアンサー

回答者： babu_baboo
回答日時：2009/10/20 14:24

だからきっと、おれは、むだにかいとうがおおいのだろうなぁ～^^;

おっちょこよいってのもかなりあるが・・・。
もうあとは、めでながれをおっておくれ！
なにがきっかけで、なにをあつめて、なにをしているのか

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

- 0
- 件

通報する

この回答へのお礼

babu_babooさん、たびたびのご教示本当にありがとうございました
m(_ _)m　m(_ _)m　m(_ _)m

本番環境でも元気に動きました。

同時に、Javascriptをこんなに自由自在に操れたら
どんなにHTMLプログラミングが楽しいだろう、とも思いました。

ともかく、本件は何度も応用が利くもので大変有益なスクリプトを
組んでいただきましたので、永久保存版にさせていただきます！

本当にありがとうございました！！
＆今後ともよろしくお願い致します(^^;

通報する

お礼日時：2009/10/20 23:18

No.5

回答者： babu_baboo
回答日時：2009/10/20 10:19

じょうぶな、ぷろぐらむ。

へんこうにつよい、ぷろぐらむ。
を、こころがけてはいますが、
きめうちは、よくなかったですね^^;

おやをみつけるのはたやすいのですが、
こをさがしだすのはめんどうで、さけてました。
そこでかいてみました。こうりつわるそう。
だれか、すまーとにかいてくれないかしら？
(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>

- 0
- 件

通報する

この回答へのお礼

babu_babooさん、たびたびのご教示ありがとうございます。

再度ご提示下さったスクリプト、そのまま試すと
やはりばっちりでしたが、本番環境に入れてみると

(1) セルクリックでの行着色はOKで、
(2) チェックON/OFFでの行着色の連動もOKなのですが、
(3) セルクリックでチェックON/OFFが利きません。

特にIE8がスクリプトエラーを吐くことはございません。

ええっと、本番環境は、セルが4列あるテーブルなのですが、
それがいけないのでしょうか。

すみません、訂正箇所にさっぱり見当がつかないのですが。。。

すみません、なにとぞご教示いただけますと幸いです。

通報する

お礼日時：2009/10/20 12:35

No.4

回答者： babu_baboo
回答日時：2009/10/19 06:28

　　　c = p.cells[2].firstChild;

これが、せるの３ばんめのさいしょののーど。
なので４ばんめの、らべるの、さらに、さいしょののーどを・・・・。

いっぱいもうけたら、わけまえください^^;

- 0
- 件

通報する

No.3

回答者： babu_baboo
回答日時：2009/10/18 18:45

ごめん！きょうも、さえてない。

。。
１のじょうけんを、みたしていませんでした。
ちょっと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">






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

補足日時：2009/10/19 00:44

通報する

- 0
- 件

通報する

No.2

回答者： babu_baboo
回答日時：2009/10/18 09:26

みじかいのなら

- 0
- 件

通報する

No.1

回答者： 4017B
回答日時：2009/10/18 06:25

━━Sample::Start━━━━━━━━━━━━━━━━━━━━━━

<html>
<head>

<style type="text/css">
table#AA tr {
　background-color: #ffa;
}
</style>

<script type="text/javascript">

</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.がある程度新しいヤツじゃないと動作しません。
他にも方法があると思いますが、取り急ぎのサンプルとして。