9

CSS を使用して、次のようにラジオ グループのスタイルを変更しています。

ラジオグループのスタイルを変更

これは、実際の入力 (ボタン) を label タグ内にネストして隠しdisplay:none、CSS で入力自体を設定し、ラベル自体をスタイルしてボタンになるようにすることで行われます。

<label for="likert1" class="likert">
   <input type="radio" id="likert1" name="patientViewGroup" value="1">
   1
</label>

それはすべてCSSで行うことができます...しかし、一部のブラウザ（私はあなたを見ています、IE8以下）は疑似クラスを認識しないため:checked、実際の入力をそのように行います-これがフォーム外の値 - チェックされていることを常に登録するとは限らないため、JQuery が助けになります。

現在、JQuery を使用して、ラベルの 1 つがクリックされたときに addClass ".amClicked" を設定しています。このとき、ラジオの "checked" 属性を "true" に切り替え、兄弟から "amChecked" クラスを削除します。簡単ですよね？その JQuery コードは次のとおりです。

$('.likert').on("click",function() {
    console.log("clikcy!");
    if(!$(this).hasClass('amChecked')) { 
        $(this).addClass("amChecked");
        $(this).children(":radio").attr("checked",true).css("display","none");
    }
    $(this).siblings().removeClass("amChecked")
                       .children(":radio").css("display","none");
});

JQuery が何らかの理由で、以下の #3 のように、<input>my を上書きし、ラジオ ボタン自体を非表示にしないインラインの「スタイル」タグを my に追加することに必死になっているように見えることを除けば、そうなるでしょう。display: none;

クリックすると、ボタンが表示されます。

クリック後の入力コードは次のようになります。

<input type="radio" id="likert3" name="patientViewGroup" value="3" 
       checked="checked" style="display: inline-block; " class="amChecked">

さらに悪いこと.css("display","none")に、(上記のように) クリック コードに追加しても、それは上書きされず、ボタンは引き続き表示されます。removeClass 行に追加しないと、そのボタンはチェックされずにそこにとどまります。

ここに画像の説明を入力

SO - Jquery がこれを入札なしで私のコードに追加している理由を誰か教えてもらえますか?それを停止またはオーバーライドするためにできることはありますか? どんな助けでも大歓迎です！

4

2 に答える 2