0

次のようなラジオボタンのグループが多数あるフォームがあります。

<form blah-blah-blah>
    <input type="radio" id="id1_1" name="nam1" value="" class="rad">
      <label for="id1_1" class="kf">label1_1</label>
    <input type="radio" id="id1_2" name="nam1" value="" class="rad">
      <label for="id1_2" class="kf">label1_2</label>
    <input type="radio" id="id1_3" name="nam1" value="" class="rad">
      <label for="id1_3" class="kf">label1_3</label>
    <input type="radio" id="id2_1" name="nam2" value="" class="rad">
      <label for="id2_1" class="kf">label2_1</label>
    <input type="radio" id="id2_2" name="nam2" value="" class="rad">
      <label for="id2_2" class="kf">label2_2</label>
    <input type="radio" id="id2_3" name="nam2" value="" class="rad">
      <label for="id2_3" class="kf">label2_3</label>
</form>

CSS を使用してラジオのスタイルを変更します。

.rad {display:none;}
.kf {padding:2px; background-color:#eaeaea; border:1px solid #dadada; cursor:pointer;}
.kf:hover, .sel {background-color:#3a608e; color:#fff;}

最後に、jQuery を使用して動作させますが、動作しません。ラベルをクリックするとラジオが変わります。

    $(document).ready(function(){
        $(".rad").change(function(){
            if($(this).is(':checked')){      
                $(this).next("label").addClass("sel");
            }else{
                $(this).next("label").removeClass("sel");
            };
        });
    });

ラジオがチェックされている場合、ラベルは彼の色を変更する必要があります。ラジオが失われた場合は、「チェック済み」状態のラベルの色を「未選択」に変更する必要があります。

何が問題なのですか (いくつかの無線グループを忘れないでください)。

編集の更新:私は両方の答えを最もエレガントなソリューションに組み合わせました =)

$(document).ready(function(){
    $(".rad").change(function(){
        var chk_name = $(this).attr("name");
        if($(this).is(':checked')){
            $(this).parents().find('input[name="'+chk_name+'"]').each(function(){
                $(this).next('label').removeClass('sel');
            });
            $(this).next("label").addClass("sel");
        };
    });
});

ありがとうございました！

4

2 に答える 2

1

これを試して：

$(document).ready(function(){
    $(".kf").click(function() {
        var chk = $(this).prev("input");
        var chk_name = $(chk).attr("name");
        if (!$(chk).is(':checked')) {
            $(this).parent().find('input[name="' + chk_name + '"]').each(function () {
                $(this).removeAttr("checked");
                $(this).next('label').removeClass('sel');
            });
            $(chk).attr("checked", "checked");
            $(this).addClass('sel');
        } else {
            $(chk).removeAttr("checked");
            $(this).removeClass('sel');
        }
    });
});

実例はこちら

于 2012-04-17T13:25:15.620 に答える
1

以下は動作するはずです

 $(document).ready(function(){
 var $chk=null;
    $(".rad").change(function(e){
        if($(this).is(':checked')){
            if($chk) $chk.next("label").removeClass("sel");
            $(this).next("label").addClass("sel");
            $chk=$(this);
        }else{
            $(this).next("label").removeClass("sel");
        };
    });
});​
于 2012-04-17T13:15:22.460 に答える