Dlaczego Jquery dodaje style śródtekstowe do mojego html?

Question

używam CSS do zmiany stylu grupę radiową takiego:

To się robi ukrywając gniazdowania rzeczywiste wejście (przycisk) wewnątrz tagu etykietę, a następnie ustawienie samego wejścia do display:none w CSS i stylizacji samą etykietę, aby stać przycisku, takie jak:

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

To można zrobić wszystko z CSS ... ale ponieważ niektóre przeglądarki (patrzę na ciebie, IE8 i poniżej) nie rozpoznaje pseudoklasie :checked, robiąc to w ten sposób, że ludzie ur rzeczywiste wejście - co spowoduje przekazanie wartości z formularza - nie zawsze rejestruje, że jest sprawdzane, więc JQuery na ratunek.

Używam teraz JQuery do ustawienia addClass ".amClicked" po kliknięciu jednej z etykiet, w którym to czasie przełącza także "sprawdzony" atrybut radia na "true" i usuwa klasę "amChecked" z rodzeństwo. Łatwo, prawda? Oto, że kod 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"); 
}); 

Dobrze byłoby, oprócz tego, że JQuery, z jakiegoś powodu, wydaje się piekło gięte na dodanie „styl” tag in-line do mojego <input> że jest przesłanianie moich display: none; i nie- ukrywanie sam przełącznik, jak # 3 poniżej:

i oto, co to kod wejściowy wygląda po kliknięciu:

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

Co gorsza, dodanie do mojego kodu kliknięcia .css("display","none") (jak widać powyżej) nie zastępuje go - przycisk nadal pokazuje się. Gdybym nie dodawać go do linii removeClass, że przycisk pozostaje tylko tam zaznaczone, a więc:

SO - może ktoś mi powiedzieć, dlaczego jQuery jest dodanie tego nieproszony do mojego kodu, i czy jest coś, co mogę zrobić, aby to zatrzymać lub zmienić? Każda pomoc będzie bardzo ceniona!

Answer 1

Z mojego doświadczenia wynika, że ​​jQuery zawsze będzie wprowadzać style w linii. Wpływa na elementy, a nie na style zdefiniowane na stronie lub w arkuszu stylów. Wie tylko, że element istnieje, ponieważ wskazałeś go temu elementowi.

Ponadto, nie włożyłbym radia do etykiety. To może być przyczyną problemu.

W arkuszu stylów lub gdy kiedykolwiek wasze style są zdefiniowane:

.hidden { 
    display: none; 
} 

Dlaczego nie użyć klasy z display:none; zamiast .css()? .addClass('hidden')., .removeClass('hidden') powinno działać.

Następnie możesz użyć tego w dowolnym miejscu.

Pójść, aby zbudować skrzypce w międzyczasie do przetestowania.

EDIT Oto fiddle. Faktycznie, właśnie rozpoczął patrząc na jQuery.Nie jestem pewien, czy widzę zamierzony rezultat? Chcesz tylko kliknąć element i zmienić radio, prawda?

Za pomocą przycisków radiowych nie trzeba ustawiać czegoś, co spowoduje, że zostaną one usunięte z listy. Będą one usuwane samodzielnie.

Jeśli ustawisz ukrytą wartość zamiast wartości radiowych display: none;, nie natkniesz się na problemy wymienione w komentarzach do pytania. Następnie wystarczy ustawić funkcję, aby zmienić wartość ukrytej wartości na podstawie jakiegoś atrybutu klikniętego elementu.

Answer 2

Użyj CSS do ustawienia wejść radiowych "display i nie zmieniaj go za pomocą jQuery.

label.likert > input { 
    display: none; 
} 

Ponadto, aby przełączyć atrybut "sprawdzony", przypisujesz mu wartość "sprawdzono". Aby "odznaczyć", usuwasz atrybut.

$('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'); 
}); 

Wyrzuciłem to w this fiddle.