WEBOPIXEL

jQueryで上下左右で一つのラジオボタン

Posted: 2011.09.22 / Category: javascript / Tag: 

通常ラジオボタンは横一列で一つだけ選択できますが、jQueryを使用して縦の列も一つにする方法です。

Sponsored Link
[DEMO] Radio Grid

html

	<table>
		<tr>
		    <th></th>
		    <th>1</th>
		    <th>2</th>
		    <th>3</th>
		</tr>
		<tr>
			<td>Twix</td>
			<td><input type="radio" name="row-1" data-col="1"></td>
			<td><input type="radio" name="row-1" data-col="2"></td>
			<td><input type="radio" name="row-1" data-col="3"></td>
		</tr>
		<tr>
			<td>Snickers</td>
			<td><input type="radio" name="row-2" data-col="1"></td>
			<td><input type="radio" name="row-2" data-col="2"></td>
			<td><input type="radio" name="row-2" data-col="3"></td>
		</tr>
		<tr>
		    <td>Butterfingers</td>
		    <td><input type="radio" name="row-3" data-col="1"></td>
		    <td><input type="radio" name="row-3" data-col="2"></td>
		    <td><input type="radio" name="row-3" data-col="3"></td>
		</tr>
	</table>
	

jQuery

	$(function() {
		var col, el;
		$("input[type=radio]").click(function() {
		   el = $(this);
		   col = el.data("col");
		   $("input[data-col=" + col + "]").prop("checked", false);
		   el.prop("checked", true);
		});
	});
	
[参照元サイト] Radio Buttons with 2-Way Exclusivity | CSS-Tricks