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

Posted: 2011.09.22 / Category: javascript / Tag: jQuery
通常ラジオボタンは横一列で一つだけ選択できますが、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); }); });