Ajouter et supprimer une classe sur l'étiquette radio de clic

Question

J'ai une liste avec l'entrée radio et le texte. Quand j'en ai coché un il a ajouté une classe de checked ajoutée (ce n'est pas dans l'exemple). Je veux cacher la radio et afficher uniquement du texte.

J'ai déjà essayé du code JS et j'ai un échantillon presque fonctionnel mais il y a deux choses qui ne marchent pas bien.

Le premier est que sur le chargement de la page tout texte est marqué comme actif, et la seconde est que la classe active n'est pas supprimée lorsque je clique sur un autre texte.

$(".attrprod").click(function(e) { 
 
    $(this).addClass("active").siblings().removeClass("active"); 
 
});

.active { 
 
    border: 2px solid red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <label> 
 
     <div class="radio"><span class="checked"><input type="radio" class="attribute_radio" name="group_1" value="954" checked="checked"></span> 
 
     </div> 
 
     <span class="attrprod">36</span> 
 
    </label> 
 
    </li> 
 
    <li> 
 
    <label> 
 
     <div class="radio"><span><input type="radio" class="attribute_radio" name="group_1" value="956"></span></div> 
 
     <span class="attrprod">37</span> 
 
    </label> 
 
    </li> 
 
    <li> 
 
    <label> 
 
     <div class="radio"><span><input type="radio" class="attribute_radio" name="group_1" value="957"></span></div> 
 
     <span class="attrprod">38</span> 
 
    </label> 
 
    </li> 
 
    <li> 
 
    <label> 
 
     <div class="radio"><span><input type="radio" class="attribute_radio" name="group_1" value="958"></span></div> 
 
     <span class="attrprod">39</span> 
 
    </label> 
 
    </li> 
 
    <li> 
 
</ul>

Answer 1

Pour ajouter premier numéro actif classe au texte que vous voulez mettre en évidence sur le chargement de la page, comme ceci

<span class="attrprod active">36</span> 

Pour la deuxième question, cette ligne de code pourrait être votre problème:

$(this).addClass("active").siblings().removeClass("active"); 

Vous voulez probablement supprimer les classes, puis l'ajouter à l'élément sélectionné:

$(".attrprod").click(function (e) { 
$(".attrprod").removeClass("active"); // remove all current selections 
$(this).addClass("active"); // select this element 
}); 

Answer 2

Pourquoi ne pas enlever tous la classes de active d'abord en utilisant attrprod .. Et puis essayer de régler la class via this

$(".attrprod").click(function (e) { 
    $(".attrprod").removeClass("active"); 
    $(this).addClass("active"); 
});