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);
});
});
