0

Hola buenos dias tengo una clase de preguntas en un accordion con los datos traidos en un ajax y quisiera que digamos si respondo la pregunta 1 al dar click al boton se coloreeara el fondo de esa pregunta tengo un onclick esta es la funcion de ese onclick

function autocompletar_tec_ins_inc(){
    //alert("ejecutando autocompletar_tec_ins_inc...");


}







//funcion autocompletar_tec_ins_inc

function Fagregartecins_inc_1(){
    //alert("Incumplió rta1");
if (confirm("DESEA ENVIAR AL TECNICO AL INCUMPLIMIENTO")){



        tec_inc_id_tecnicos_1 = $('#txt_tec_ins_inc_1').val();
        tec_inc_id_pregunta_1 = 1; //$('#txt_tec_inc_id_pre_2').val();
        if(tec_inc_id_tecnicos_1 == '' || tec_inc_id_tecnicos_1 == null){
            alert('Debe seleccionar un técnico.');
            return;
        }

        var datosTecInc1 = {
                tec_inc_id_tecnicos         : tec_inc_id_tecnicos_1,
                tec_inc_id_pregunta         : tec_inc_id_pregunta_1
            };

        //alert("agregando tecnico..."  + tec_inc_id_tecnicos_1);
        $.post('php/agregartecinc.php', datosTecInc1, function(data, textStatus, xhr) {
                //alert("Procesando...");
                if (data == 0){
                    alert('No se pudo procesar Se encuentra repetido');
                    return;
                }
                if (data == 2){
                    alert('No se ha ingresado el técnico a la inspeccion.');
                    return;
                }
                if (data == 3){
                    alert('No se pudo procesar. Error al insertar.');
                    return;
                }
                if (data == 5){
                    alert('Cedula de tecnico no encontrada.');
                    return;
                }

                if (data == 1){

                    alert('Se ha guardado correctamente el registro: ' + data);



                    $.post('php/cuadrilla_actualiza.php', datosTecInc1, function(data2, textStatus, xhr) {
                        //alert(data2);
                        $('#datoscuadrilla').html(data2);
                    });
                    return;
                }
                alert('Error:' + data);

        }); 
    return;
}

}

1 respuesta 1

0

Para realizar lo que quieres, podrías crear una clase en CSS la cual tendría las características que necesitas (background-color, color, font-size, etc) y asignarla al radio seleccionado:

$('input:radio').change(function(){
  var $this = $(this);
  $this.closest('.container').find('div').removeClass('selected');
  $this.closest('.color').removeClass('selected');
  $this.closest('.color').addClass('selected');
});
legend {
    background-color: #000;
    color: #fff !important;
    padding: 3px 6px;
}

.output {
    font: 1rem 'Fira Sans', sans-serif;
}

input {
    margin: .4rem;
}

.selected {
    background-color: red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <form>
    <fieldset>
        <legend>¿De qué color era el caballo negro de Napoléon?</legend>

        <div class="color">
            <input type="radio" id="negro" 
                   name="test" value="negro" />
            <label for="huey">Negro</label>
        </div>

        <div class="color">
            <input type="radio" id="blanco" 
                   name="test" value="blanco" />
            <label for="dewey">Blanco</label>
        </div>

        <div class="color">
            <input type="radio" id="gris" 
                   name="test" value="gris" />
            <label for="louie">Gris</label>
        </div>
    </fieldset>
</form>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Resumiendo, trabajamos con el evento change del elemento, y antes de asignar el background-color al radio seleccionado, nos encargamos de quitar el mismo mediante las funciones closest y removeClass

PD: Este ejemplo usa JQuery

Nos comentas =)

6
  • Si amigo necesito algo asi yo te puedo contactar y te muestro como lo haria de una forma que tengo el 8 oct. 2018 a las 14:31
  • Para adecuarlo a un collapse sería practicamente lo mismo colega... no entendiste algo? Con gusto puedo ayudarte! el 8 oct. 2018 a las 14:32
  • Solo que tengo bastantes cosas diferentes hay :'c te mostraria una foto por gmail el 8 oct. 2018 a las 14:34
  • La idea es que trates de implementar la solución primero y en caso que no te funcione vuelvas acá, nos comentes que es lo que intentaste y así te podemos orientar.. es el flujo amigo =) Obviamente mi ejemplo es sólo una ayuda para ti, pero no debe estar necesariamente exactamente como lo necesitas... el 8 oct. 2018 a las 14:36
  • Vale amigo tratare de implementarlo aunque se me hara muy dificil porque soy muy novato en esto el 8 oct. 2018 a las 14:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.