テーブルの行()をクリックでinputをチェック

テーブルで、行をクリックさせたら先頭のinputタグをチェックさせるような要望がちょこちょこあるので、備忘録。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>trタグクリックでinputをチェック</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	</head>
	<body>
		<div class="container">
			<h1>テーブルの行をクリックでinputをチェックさせる</h1>
			<table class="table table-bordered">
				<tr> <td><input type="radio" name="rdo" value="a"></td> <td>これはaです</td> <td>DummyA</td></tr>
				<tr> <td><input type="radio" name="rdo" value="b"></td> <td>これはbです</td> <td>DummyB</td></tr>
				<tr> <td><input type="radio" name="rdo" value="c"></td> <td>これはcです</td> <td>DummyC</td></tr>
				<tr> <td><input type="radio" name="rdo" value="d"></td> <td>これはdです</td> <td>DummyD</td></tr>
			</table>
		</div>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script type="text/javascript">
		$(function(){
			var $trList = $("tr:has(input)");					//trでinputタグをもつものを取得
			$trList.each(function() {							//取得したtrタグそれぞれに処理を行う
			    var $input = $(this).find("input");				//trからinputタグを取得しておく。
				$(this).click(function(){
					$input.prop('checked',true);
			    });
			});
		});
		</script>

	</body>

</html>

Leave a Reply Cancel Reply