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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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