爲什麼JQuery會將內聯樣式添加到我的html中？

Question

我使用CSS再整一個像這樣的單選按鈕組：

它被隱藏嵌套的標籤，標籤內的實際輸入（按鈕），然後輸入自己設置爲display:none完成在CSS和樣式的標籤本身成爲按鈕，因爲這樣的：

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

這是可以做到所有的CSS ...但由於一些瀏覽器（我在看你，IE8及以下）不承認:checked僞類，這樣做的男人，喲你的實際輸入 - 這是什麼將價值從表格中傳遞出來 - 並不總是註冊它被檢查，所以JQuery來救援。

當我點擊一個標籤時，我現在使用JQuery來設置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的，由於某種原因，似乎一心要加入在線「風格」的標籤，以我的<input>是壓倒一切的我display: none;和未隱藏單選按鈕本身，如下面＃3：

及這裏的輸入代碼如下所示點擊後：

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

更糟糕的是，在我的點擊代碼中添加.css("display","none")（如上所示）並未覆蓋它 - 該按鈕仍然顯示。如果我不把它添加到removeClass線，該按鈕就停在那兒，不加制止，像這樣：

SO - 誰能告訴我，爲什麼jQuery是添加此，不速之客，我的代碼，並且我有什麼可以阻止或覆蓋它的嗎？任何幫助將不勝感激！

Answer 1

從我的經驗來看，jQuery總是會推送樣式內聯。它影響元素，而不是頁面或樣式表定義的樣式。它只知道元素存在，因爲您指向了該元素。

此外，我不會把收音機內的標籤。這可能是導致問題的原因。

在樣式表或者其它任何你的風格定義爲：

.hidden { 
    display: none; 
} 

爲什麼不使用一類具有display:none;而不是.css()？ .addClass('hidden')。，.removeClass('hidden')應該工作。

然後你就可以使用它。

打算在平均時間內建一個小提琴來測試。

編輯這裏是一個fiddle. 其實，剛開始看着你的jQuery。我不確定我看到預期的結果是什麼？你只是想點擊一個元素，它會改變收音機，對吧？

使用單選按鈕，您不必設置某些內容以使它們不被選中，它們將自行取消選擇。

如果您設置了隱藏值而不是display: none;無線電值，那麼您不會遇到問題評論中提到的問題。然後，您只需設置一個函數，根據您單擊的元素的某個屬性更改隱藏值的值。

Answer 2

使用CSS設置無線電輸入'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。