[SOLUCIONADO] pasar un checkbox a checked y luego a no checked con javascript

pablokru · #1 (**permalink**) 21/03/2013, 12:30

Hola a todos! Les pido ayuda con el sigueinte codigo:

Quiero hacer que cuando hago click en el boton1, el checkbox pase a checked, y que cuando haga click en el tilde me pase a no checked.

Esto lo pude hacer con el codigo de abajo, el problema es que solo me funciona una vez (a menos que refresque la pagina). Que esta faltando en este codigo?

codigo html:

Código HTML:

<input id="caja14" type="checkbox" onclick="ajax2();"/>
<input id="boton1" type="button" onclick="ajax1();"/>

codigo javascript

Código Javascript:

Ver original<script type="text/javascript">
    function ajax1(){   
               var chequear=document.getElementById('caja14');
               chequear.setAttribute('checked','checked');
    }
    </script>
    <script type="text/javascript">
    function ajax2(){  
               var chequear=document.getElementById('caja14');
               chequear.removeAttribute('checked');
    }
    </script>

Muchas gracias!

maycolalvarez · #2 (**permalink**) 21/03/2013, 13:05

http://stackoverflow.com/questions/8...ith-javascript

no es necesario que añadas o remuevas el atributo, solo debes de setearlo, es para efectos del parser HTML el tenerlo declarado, para javascript el objeto del checkbox siempre lo tendrá, como verdadero o falso

HackID1 · #3 (**permalink**) 21/03/2013, 13:30

Hazlo de la siguiente manera.

Código Javascript:

Ver original<html>
<head>
    <script>
        
        function ajax1(){   
                   document.getElementById("caja14").checked = true;
                   
                   
        }
        
        function ajax2(){  
                   document.getElementById("checkbox").checked = false;
        }
    
    </script>
</head>
 
<body>
    <input id="caja14" type="checkbox" onclick="ajax2();"/>
    <input id="boton1" type="button" onclick="ajax1();" value="boton1"/> 
</body>
 
</html>

Saludos! :)

pablokru · #4 (**permalink**) 21/03/2013, 13:36

Muchas gracias! Solo otra consulta:

Si quisiera poder tildar el checkbox tanto desde el boton1 como desde el checkbox como seria?

maycolalvarez · #5 (**permalink**) 21/03/2013, 13:40

Cita:

Iniciado por pablokru

Muchas gracias! Solo otra consulta:

Si quisiera poder tildar el checkbox tanto desde el boton1 como desde el checkbox como seria?

usa una comparación, o el método toogle:

Código Javascript:

Ver originalfunction check_toggle(){ 
    var chk_objeto = document.getElementById("caja14");
    chk_objeto.checked = ! chk_objeto.checked; //su contrario, lo checkea si no lo está y viceversa
}

pablokru · #6 (**permalink**) 21/03/2013, 13:53

Gracias, esto lo soluciona, pero si quisiera que ademas cambie por ejemplo el color del boton1 al destildar el checkbox, como seria?

miguec04 · #7 (**permalink**) 21/03/2013, 14:30

has una clase y se la asignas.

pablokru · #8 (**permalink**) 21/03/2013, 14:59

Pero como seria. Yo probe agregando el siguiente codigo pero no funciona:
var tit=document.getElementById('boton14');
tit.style.background-color='#ff0000';

Código HTML:

<input id="caja14" type="checkbox" onclick="ajax2();"/>
<input id="boton14"  style="background-color:#C00" value="boton" type="button" onclick="ajax1();"/>

Código Javascript:

Ver original<script type="text/javascript">
function ajax1(){   
document.getElementById('caja14').checked = true;
    }
    </script>
 
    <script type="text/javascript">
    function ajax2(){
var tit=document.getElementById('boton14');
tit.style.background-color='#ff0000';
 
function check_toggle(){ 
var chk_objeto = document.getElementById('caja14');
chk_objeto.checked = ! chk_objeto.checked; 
    }
    </script>

pablokru · #9 (**permalink**) 21/03/2013, 15:46

Osea con el siguiente codigo, cuando aprieto el boton14, el texto del boton cambia a azul y se tilda el checkbox. Lo que no me sale es que cuando destilde el checkbox, el color del texto del boton se ponga rojo. Les pido ayuda por favor!

Código HTML:

<input id="caja14" type="checkbox" onclick="ajax2();"/>
<input id="boton14"  value="boton" type="button" onclick="ajax1();"/>

Código Javascript:

Ver original<script type="text/javascript">
function ajax1(){   
document.getElementById('caja14').checked = true;
var colorboton=document.getElementById('boton14');
colorboton.style.color='blue';
    }
</script>
 
<script type="text/javascript">
function ajax2(){
 
function check_toggle(){ 
 
var chk_objeto = document.getElementById('caja14');
chk_objeto.checked = ! chk_objeto.checked; //su contrario, lo checkea si no lo está y viceversa4.}
    }
</script>

Gracias!

miguec04 · #10 (**permalink**) 21/03/2013, 16:10

espero te sirva.

Código HTML:

Ver original<style>
    .COLOR_AZUL {
        color: #3366cc;
    }
    
    .COLOR_NORMAL {
        color: #000;    
    }
</style>
 
<input id="caja14" type="checkbox" onclick="ajax1(this);"/>
<input id="boton14"  value="boton" type="button" class="COLOR_NORMAL" onclick="ajax1(null);"/> 
Código Javascript:
Ver original
<script type="text/javascript">
function ajax1(elem){
    
    var elemento                                    = document.getElementById('caja14');
    var colorboton                                  = document.getElementById('boton14');
    if(elem==null) {
        elemento.checked                                = !elemento.checked;
    }
    
    if(!elemento.checked) {
        colorboton.setAttribute('class','COLOR_NORMAL');
    } else {
        colorboton.setAttribute('class','COLOR_AZUL');
    }
}
</script>

maycolalvarez · #11 (**permalink**) 22/03/2013, 12:53

tit.style.background-color='#ff0000';

cuando tengas este caso de CSS, en JS se resolvio con camelCase, tenerlo en cuenta:

tit.style.backgroundColor='#ff0000';

http://www.w3schools.com/jsref/prop_...roundcolor.asp