0

ラジオボタン付きのテーブルを作りたいです。
行にカーソルを合わせると、表の行が強調表示されます。('hover' クラスが適用されます) 行の変更をクリックすると、含まれているオプション ボタンがチェックされ、背景色が変更されます ('active' クラスが適用されます)。

アクティブなクラスは、行ではなくラジオが直接クリックされたときにのみ適用されます。また、アクティブなクラスは削除されません。

http://jsfiddle.net/vincentieo/cH7R9/2/

HTML

<form action="paypal-size-guide.html" method="" accept-charset="utf-8">
<table id="sizeOptions">
<thead>File Size</thead>
    <tr>
        <td><input type="radio" name="size" value="Large" checked="true"> Large</option></td>
        <td>3000 x 2000px</td>
        <td>&pound;20</td>
    </tr>
    <tr>
        <td><input type="radio" name="size" value="Medium" > Medium</option></td>
        <td>1500 x 1000px</td>
        <td>&pound;15</td>
    </tr>
    <tr>
        <td><input type="radio" name="size" value="Small" > Small</option></td>
        <td>750 x 500px</td>        
        <td>&pound;10</td>
    </tr>
</table>
</form>

JS

$('#sizeOptions tr').click(function() {
    $(this).find('td input:radio').prop('checked', true);
});

$('#sizeOptions tr td input:radio').click(function() {
    if($(this).is(':checked')) {
        $(this).closest('tr').addClass("active");
    } else {
        $(this).closest('tr').removeClass("active");
    }
});

$('#sizeOptions tr').mouseover(function() {
$(this).addClass("hover");
});

$('#sizeOptions tr').mouseout(function() {
$(this).removeClass("hover");
});

CSS

#sizeOptions {
    border-collapse: collapse;
    padding: 10px;
}

#sizeOptions td {
    padding: 10px;
}

#sizeOptions tr {
    border-bottom: solid 1px #b1b1b1;
}
4

1 に答える 1

2

問題の原因となっていることがいくつかあります。

まず、行をクリックするためのハンドラーが既にあります。ラジオ ボタンと行の両方のクリックを機能させたい場合は、行ハンドラーのみが必要です。これは、ボタンのクリックが行にも伝達されるためです。

.click()ボタンのクリック ハンドラーは、プログラムで呼び出す場合を除き、jQuery でボタンの状態を設定する場合ではなく、ボタンへの実際のクリックにのみ適用されます。

ラジオ ボタンをクリックしても選択を解除することはできません。別のボタンをクリックするだけです。したがって、コードがアクティブなクラスを削除することはありません。代わりに、アクティブなクラスをすべての行から削除し、クリックされた行に適用し直します。また、コードがかなり簡素化されます。

また、css 定義の順序を並べ替えると、クリックするとすぐにアクティブな状態が表示されます。これは、ユーザーへのフィードバックがあるため、より優れた UI です。または、クラスを開催することもできます.active.hover。どちらにしても、ユーザーがクリックしたことが簡単にわかるのはいいことです。

コード：

$('#sizeOptions tr').click(function () {
    $(this).find('td input:radio').prop('checked', true);
    $('#sizeOptions tr').removeClass("active");
    $(this).addClass("active");
});

デモ: http://jsfiddle.net/yNWSY/

于 2013-02-25T17:55:10.327 に答える