1

HTML では、ラジオ ボタンは次のように 3*3 のマトリックスのように配置されます。ラジオ ボタン グループでは、1 つの行と列で 1 つのラジオ ボタンのみを選択する必要があり、別のラジオ ボタンを選択すると、最初に選択したボタンを無効にする必要があります。たとえば、2 番目の行 (4,5,6) と 2 番目の列 (2,5,8) で、5 番目のラジオ ボタンを選択した場合、(4,6) と (2,8) はオフにする必要があります。1 を選択した場合(2,3) と (4,7) はチェックを外す必要があります。これは、1 つの行と 1 つの列に 1 つの選択しかないことを意味します.....

1,2,3

4,5,6

7,8,9

貴重な回答をお願いします。よろしくお願いします。

4

2 に答える 2

0

これはHTMLでは不可能です。ラジオボタンは単純な方法で機能します。同じname属性値で結合されたラジオボタンのグループでは、常に1つだけをチェックでき、チェックされていないボタンをチェックすると、チェックされたボタンのチェックが外されます。それでおしまい。

最終的な目的が何であり、それに対する最善のアプローチが何であるかは明確ではありません。ただし、説明するようなマトリックスが必要であると分析した場合は、機能全体を自分で構築する必要があります。切り替え可能な要素を使用し、CSSとJavaScriptを使用して、説明どおりに動作します。

要素をラジオボタンのように見せることは誤解を招く可能性があるため、避けるのが最善です。ブラウザに実装されているラジオボタンは特定の方法で機能し、異なる方法で動作させると少なくとも混乱を招きます。

于 2013-03-08T10:51:26.287 に答える
0

双方向排他性を持つラジオ ボタン

このスニペットはChris Coyier による css-tricks.comからのものです

これはHTML CSSであり、JSはそれをaspコントロールに変換します

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

table {
    border-collapse: collapse;    
}
td, th {
    border: 1px solid #ccc;
    padding: 10px;
}
th:empty {
    border: 0;
}

JS

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

デモ

Chris Coyier のおかげでダウンロード

于 2013-03-08T10:49:39.437 に答える