なぜJqueryはHTMLにインラインスタイルを追加していますか？

Question

私はこのようなラジオ・グループのスタイルを変更するためにCSSを使用しています：

をそれはラベルタグ内の実際の入力（ボタン）を入れ子に隠し、その後にdisplay:noneへの入力自体を設定することによって行われていますCSS、およびなど、ボタンになるためにラベル自体のスタイル：それはCSSですべてを行うことができます...しかし、いくつかのブラウザので、（私は、あなたにのlookin' IE8以下てる）

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

:checked pseudoclassを認識しないでください。実際の入力はフォームの値を渡すもので、チェックされていることを常に記録しているわけではないので、JQueryを救済します。

ラベルの1つがクリックされたときにaddClassを ".amClicked"に設定すると、ラジオの "checked"属性が "true"に切り替わり、 "amChecked"クラスが削除されます。兄弟。簡単だよね？

$('.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のは、何らかの理由で、私のdisplay: none;および未をオーバーライドしている私の<input>にインライン「スタイル」タグを追加することで地獄曲がっ思われることを除いて、次のようになります。ここではjQueryのコードがあることです下記の＃3のように、ラジオボタン自体を隠し：

そして、ここでは、その入力コードは、クリック後に次のようになります。

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

さらに悪いことに、上記のようにクリックコードに.css("display","none")を追加しても、それを上書きしない - ボタンはまだ表示されます。私はremoveClassラインに追加していない場合は、そのボタンがちょうどように、そこに未チェックのまま：

はSO - jQueryのこれを追加しているなぜ誰もが私を伝えることができ、unbidden、私のコードに、それをやめるために何かできることはありますか？どんな助けでも大歓迎です！

Answer 1

私の経験から、jQueryは常にスタイルをインラインでプッシュします。要素に影響を与え、ページやスタイルシートで定義されたスタイルには影響しません。あなたはその要素を指していたので、要素が存在することだけを知っています。

また、私はラジオをラベルの中に入れません。それが問題の原因になっているかもしれません。

あなたのスタイルシートで

か、今までに、スタイルが定義されています。

.hidden { 
    display: none; 
} 

display:none;の代わり.css()でクラスを使用しないのはなぜ？ .addClass('hidden')。、.removeClass('hidden')が動作するはずです。

これでどこでも使用できます。

平均的なテスト時間にフィドルを構築しようとしています。

EDITはここだけ、あなたのjQueryを見て開始し、実際にfiddle. です。私は意図した結果が何であるかを確かめていませんか？要素をクリックしてラジオを変更するだけですか？

ラジオボタンを使用すると、ラジオボタンが選択されていないように設定する必要はなく、自分で選択解除されます。

display: none;のラジオ値の代わりに隠し値を設定した場合は、質問のコメントに記載されている問題に取り掛かることはありません。次に、クリックした要素のある属性に基づいて隠し値の値を変更する関数を設定します。

Answer 2

ラジオ入力を設定するには、displayを使用し、jQueryで変更しないでください。

label.likert > input { 
    display: none; 
} 

また、「checked」属性を切り替えるには、「checked」という値を割り当てます。 「チェックを外す」には、属性を削除します。

$('label.likert').on('click', function() { 
    if (!$(this).hasClass('amChecked')) { 
     $(this).addClass('amChecked').children(':radio').attr('checked', 'checked'); 
    } 

    $(this).siblings('.amChecked').removeClass('amChecked').children(':radio').removeAttr('checked'); 
}); 

this fiddleにまとめました。