1

通常、ラジオ入力に name 属性を割り当てると、一度に 1 つしかチェックできないことはわかっていますが、jQuery を使用して入力のスタイルを変更しているため、機能しなくなります。この問題を克服する方法を理解するには、まだ jQuery で十分に効率的ではありません。

HTML

​<input type="radio" class="radio" name="one" />
<input type="radio" class="radio" name="one" />​​​​​​​

jQuery

$('.radio').each(function() {
    $(this).hide();

    var $image = $("<img class='checkbox' src='assets/images/layout/checkbox/unchecked.png' />").insertAfter(this);

    $image.click(function() {
        var $checkbox = $(this).prev('.radio');
        $checkbox.prop('checked', !$checkbox.prop('checked'));

        if($checkbox.prop("checked")) {
            $image.attr("src", "assets/images/layout/checkbox/checked.png");
        } else {
            $image.attr("src", "assets/images/layout/checkbox/unchecked.png");
        }
    });
});

画像を変更する前に、特定の名前 (例では「1」) の入力がチェックされているかどうかをターゲットにするように条件文を変更する必要があると考えました。残念ながら、私の試みはすべて失敗しました。

4

1 に答える 1

1

各ラジオ ボタンについて、そのname属性を取得します。次に、チェックボックスの画像をクリックすると、それを持つすべてのラジオボタン要素を取得し、nameそれらのチェックを外してから、クリックされた値にチェックされた値を適用します。

jsFiddle を使用した例

于 2012-06-28T20:27:14.873 に答える