Estoy tratando de agregar una clase al elemento principal del botón de opción cuando está marcado. El problema es que la clase no parece eliminarse cuando se usa removeClass . Todavía puedo ver el fondo rojo cuando la casilla de verificación no está marcada.
Esto es lo que se me ocurrió hasta ahora...
$('input:radio').change(function () { if($(this).is(':checked')) { $(this).parent().addClass('selected'); } else { $(this).parent().removeClass('selected'); } }); .selected { background-color: #fff5f5; color: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>Select a maintenance drone:</p> <div class=""> <input type="radio" id="huey" name="drone" value="huey" checked> <label for="huey">Huey</label> </div> <div class=""> <input type="radio" id="dewey" name="drone" value="dewey"> <label for="dewey">Dewey</label> </div> <div class=""> <input type="radio" id="louie" name="drone" value="louie"> <label for="louie">Louie</label> </div>¿Cómo necesito cambiar mi código para lograr el comportamiento correcto?
No es necesario verificar otra parte en la condición is(':checked') .
Al hacer clic en el botón de opción;
- En primer lugar, realice
removeClass()desde todos los botones de opción.- Luego,
addClass()solo al elemento principal marcado respectivo.
$('input:radio').change(function(){ $('input:radio[name=' + this.name + ']').parent().removeClass('selected'); //remove class "selected" from all radio button with respective name $(this).parent().addClass('selected'); //add "selected" class only to the checked radio button }); input[type="radio"] + label { cursor: pointer; display: block; height: 40px; width: 200px; text-align: center; line-height: 40px; } .selected { background-color: #fff5f5; color: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <p>Select a maintenance drone:</p> <div class=""> <input type="radio" id="huey" name="drone" value="huey"> <label for="huey">Huey</label> </div> <div class=""> <input type="radio" id="dewey" name="drone" value="dewey"> <label for="dewey">Dewey</label> </div> <div class=""> <input type="radio" id="louie" name="drone" value="louie"> <label for="louie">Louie</label> </div>Esta es una variante de "sólo HTML y CSS válidos y sin grasa" con una estructura semántica ligeramente mejorada...
.radio-group label, .radio-group .content { display: block; position: relative; } .radio-group label { cursor: pointer; } .radio-group label:hover { background-color: #fffbfb; } .radio-group .content { z-index: 0; padding: 1.3em 8px 8px 24px; margin: -1.3em 0 0 0; } .radio-group .label, .radio-group [type="radio"] { position: relative; z-index: 1; } .radio-group [type="radio"] { top: 1px; } .radio-group [type="radio"]:checked ~ span { color: red; } .radio-group [type="radio"]:checked ~ .content { background-color: #fff5f5; } <fieldset class="radio-group"> <legend>Select a maintenance drone:</legend> <label> <input type="radio" name="drone" value="huey"/> <span class="label">Huey</span> <span class="content">... more phrasing content ...</span> </label> <label> <input type="radio" name="drone" value="dewey"/> <span class="label">Dewey</span> <span class="content">... more phrasing content ...</span> </label> <label> <input type="radio" name="drone" value="louie"/> <span class="label">Louie</span> <span class="content">... more phrasing content ...</span> </label> </fieldset>esto funciona bien
$('input:radio').change(function(){ $('input:radio').parent().removeClass('selected'); // Remove the class from every element $(this).parent().addClass('selected'); // Add calss to the clicked element }); .selected { background-color: #fff5f5; color: red; } <html> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <div class=""> <input type="radio" id="huey" name="drone" value="huey" checked /> <label for="huey">Huey</label> </div> <div class=""> <input type="radio" id="dewey" name="drone" value="dewey" /> <label for="dewey">Dewey</label> </div> <div class=""> <input type="radio" id="louie" name="drone" value="louie" /> <label for="louie">Louie</label> </div> </body>