checkbox y JavaScript

CoericK · #1 (**permalink**) 15/05/2011, 13:01

Saludos tengo una pequeña inquietud y espero me puedan ayudar o guiar.
Pasa que tengo en un formulario los siguientes checkbox:

Código HTML:

Dia Libre:<br>
<input type="checkbox" name="ND" checked />No definió<br>

<input type="checkbox" name="dia[]" value="Lunes"/>Lunes<br>
<input type="checkbox" name="dia[]" value="Martes"/>Martes<br>
<input type="checkbox" name="dia[]" value="Miercoles"/>Miércoles<br>
<input type="checkbox" name="dia[]" value="Jueves"/>Jueves<br>
....

Lo que yo quiero es que por defecto la casilla No definió, venga seleccionada, pero ya al darle click a cualquiera de los checkbox que contenga un día se deseleccione No definió, y asi si selecciono varios dias, la casilla No definió se quede deseleccionada, pero si nuevamente deselecciono los dias osea no selecciono ningun dia automaticamenteNo definió quede seleccionada, espero mi idea quede entendida espero y agradesco cualquier tipo de sugerencia y ayuda, aclaro que no soy un experto en Javascript.

abimaelrc · #2 (**permalink**) 15/05/2011, 13:39

¿No te sirve mejor los botones de radio? Porque a mi parecer es lo que deseas lograr.

alexg88 · #3 (**permalink**) 15/05/2011, 13:43

Los botones de radio sólo dejan elegir una opción a la vez.

Él quiere elegir varios días de la semana, pero si no hay ninguno elegido que se seleccione el que pone No definió.

Yo utilizaría JQuery para lo que quieres, aunque se puede hacer con javascript manualmente.

CoericK · #4 (**permalink**) 15/05/2011, 13:44

Asi es alex, tendrias un ejemplo o una guia??

Patriarka · #5 (**permalink**) 15/05/2011, 13:50

proba esto:

Código Javascript:

Ver originalcheckControl= false,
 
    function checkAll()
    {
        var chks = document.getElementsByName('dia[]') ;
 
        var control = (this.checkControl) ? false : true ;
 
        for(var i = 0; i < chks.length; i++)
            chks[i].checked = control;
 
        this.checkControl = control ;
    }

alexg88 · #6 (**permalink**) 15/05/2011, 13:54

En esta página (http://api.jquery.com/checked-selector/) hay un ejemplo con JQuery aunque el código de Patriarka está muy bien.

CoericK · #7 (**permalink**) 15/05/2011, 13:55

Se agradece su pronta respuesta, pero como implementaria el codigo de Patriarka??

alexg88 · #8 (**permalink**) 15/05/2011, 14:13

Ahora que miro el código de Patriarka, creo que no es lo que tu querías.

Algo así, es un ejemplo:

Código Javascript:

Ver originalfunction checkAll(name)
    {
 
        var chks = document.getElementsByName(name) ;
 
        var control=0;
 
        for(var i = 0; i < chks.length; i++)
           if (chks[i].checked)
            control++; 
               
 
        return control;
    }
 
 
var checkboxs = document.getElementsByName('dia[]');
for(var i=0; i<checkboxs.length; i++) {
checkboxs[i].onchange = function(){ alert('Seleccionados: '+checkAll('dia[]'))};
}

He cambiado la función CheckAll para que te devuelva cuanto checkbox están seleccionados, luego tu podrías hacer que si hay cero, se seleccione el otro checkbox y al revés.

fekaa11 · #9 (**permalink**) 15/05/2011, 14:13

Soy medio bruto en javascript, pero a ver si te sirve:

Código Javascript:

Ver original<html>
<head><title>Prueba - Fekaa</title>
<script type="text/javascript">
function estado(){
    var dias = document.getElementsByName("dia[]");
    var ND = document.f1.ND;
    var select = false;
    for(var i=0;i<dias.length;i++){
        if(ND.checked==true){
            dias[i].checked = false;
            dias[i].disabled = true;
        }else{
            dias[i].disabled = false;
        }
        if(dias[i].checked==true){
            select = true;
        }
    }
    if(select==true){
        ND.disabled = true;
        ND.checked = false;
    }else{
        ND.disabled = false;
    }
}
</script>
</head>
<body>
<form name="f1">
Dia Libre:<br>
<input type="checkbox" name="ND" onclick="estado();" />No defini&oacute;<br>
 
<input type="checkbox" name="dia[]" value="Lunes" onclick="estado();"/>Lunes<br>
<input type="checkbox" name="dia[]" value="Martes" onclick="estado();"/>Martes<br>
<input type="checkbox" name="dia[]" value="Miercoles" onclick="estado();"/>Miércoles<br>
<input type="checkbox" name="dia[]" value="Jueves" onclick="estado();"/>Jueves<br>
</form>
</body>
</html>

Quizás haya lineas de código de más, lo mejor es que busques una forma de simplificarlo. Saludos !

Patriarka · #10 (**permalink**) 15/05/2011, 14:19

como no sabes implementar mi codigo,

es un simple onclick en

<input type="checkbox" name="ND" checked />No definió<br>

a vos te falta hacer q si ND esta en true se seleccionan todas
si hago click otra ves los deselecciono

asi lo mismo son un radio mas facil

tienen q hacer simples IFSSSSS

abimaelrc · #11 (**permalink**) 15/05/2011, 14:25

¿Oh, o sea que si se selecciona cualquier día de la semana (o cualquiera) no esté seleccionado No definió? En todo caso, eso es javascript. Pero algo sencillo con javascript es así

Código PHP:

  <script type="text/javascript">
function addListener(element, type, expression, bubbling)
{
    bubbling = bubbling || false;

    if(element.addEventListener) { // Standard
        element.addEventListener(type, expression, bubbling);
        return true;
    } else if(element.attachEvent) { // IE
        element.attachEvent('on' + type, expression);
        return true;
    } else return false;
}

var obj = document.getElementsByName('week');
function allChecksEmpty(){
    for(var i in obj){
        if(i > 0 && obj[i].checked){
            return false;
        }
    }
    return true;
}
function fixChecked(){
    for(var i in obj){
        addListener(obj[i], 'click', function(){
            obj[0].checked = false;
            if(allChecksEmpty()){
                obj[0].checked = true;
            }
        });
    }
}
window.onload = fixChecked;
</script>

<input type="checkbox" name="week" value="nd" checked="checked" /> ND<br />
<input type="checkbox" name="week" value="l" /> L<br />
<input type="checkbox" name="week" value="m" /> M<br />
<input type="checkbox" name="week" value="w" /> W<br />
<input type="checkbox" name="week" value="j" /> J<br />
<input type="checkbox" name="week" value="v" /> V<br />
<input type="checkbox" name="week" value="s" /> S<br />
<input type="checkbox" name="week" value="d" /> D

IEKK · #12 (**permalink**) 15/05/2011, 14:39

abimaelrc

Me encanta tu forma de programar, sobre todo porque es limpio y fácilmente reutilizable

Ummm ... pero si ya estaban liados con los checks y postean esto en php, ¿no crees que es mucho meterles los Listener? Es decir, sólo le pusistes comentado que el maldito IE usa el attachEvent xDDDDD

abimaelrc · #13 (**permalink**) 15/05/2011, 14:50

Recomiendo esta lectura http://en.wikipedia.org/wiki/Unobtrusive_JavaScript. La idea es separar responsabilidad. Las etiquetas se usan para marquetar, es decir describir la estructura de un documento. Eso quiere decir que se debe evitar mezclar programación con marquetación. También se debe evitar combinar apariencia con marquetación, para eso es CSS, etc. etc.

CoericK · #14 (**permalink**) 15/05/2011, 15:42

muchas gracias el codigo de fekaa11 me sirvio, gracias a todos.