[SOLUCIONADO] Simple problema en formulario

718208 · #1 (**permalink**) 20/03/2015, 19:03

Hola estaba practicando un poco html, y me encontré con un problemita, al hacer un formulario, quiero hacer tipo gustos musicales, que uno pueda elegir entre varios genereros, osea que sea tipo un multiple, pero con un tipo radio, y que en esas opciones haya una opcion que sea ninguno del mismo tipo (osea radio) que si esta puesta la opcion de nada se borren las otras marcadas o no se puedan marcar las otras, dejo un poco el código que hice, que no tiene mucho sentido pero es más que nada para que sea clara mi explicación...

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
<head>
    <title>Titulo</title>
    <link rel="SHORTCUT ICON" href="favicon.ico"/>
    <meta name="robots" content="index,follow"/>
    <meta name="description" content="descripcion de web"/>
    <meta name="keywords" content="palabras clave"/>
</head>
<body bgcolor="" background="" link="" alink="" vlink="" topmargin="" marginwidth="" text="">
<h1 align="center">Rellene el formulario</h1>
<form action="procesador.php" method="post">
    <fieldset>
    <legend><font color="red">DATOS PERSONALES</font></legend>
        <label>
            <input name="nombre" type="text" placeholder="Ingrese su nombre" autofocus/><br/><br/>
        </label>
        <label>
            <input name="apellido" type="text" placeholder="Ingrese su apellido"/><br/><br/>
        </label>
        <label>
            <input name="edad" type="number" placeholder="Escriba su edad"/><br/><br/>
        </label>
        <label>
            <input name="dni" type="text" placeholder="Ingrese su dni"/><br/><br/>
        </label>
    </fieldset>
    <fieldset>
        <legend><font color="blue">GUSTOS MUSICALES</font></legend>
            <label><select name="musica" multiple>
                        <input type="radio" value="1"/>Rock
                        <input type="radio" value="2"/>cumbia
                    </select></label>
            </fieldset>
</form>
 
 
</body>
</html>

fede5426 · #2 (**permalink**) 21/03/2015, 11:44

Para que puedas hacer múltiples selecciones, tenes que usar "checkbox" no "radio", justamente porque input radio no lo admite.

Ahora, para hacer que cuando selecciones "Nada", se quiten todas las selecciones, tenes que obtener el estado del checkbox "nada" y si es true quitárselo a los demás.

Código HTML:

Ver original<input class="checkbox" type="checkbox" value="rock" />Rock
  <input class="checkbox" type="checkbox" value="cumbia" />Cumbia
  <input id="ch_nada" type="checkbox" value="nada" />Nada

Código Javascript:

Ver original$("#ch_nada").click(function() {  
        if($("#ch_nada").prop("checked", true)) {  
            $(".checkbox").prop("checked", false);
        } 
    });

Solamente faltaria agregar que cuando se clickee cualquier otra opcion, se desmarque "nada":

Código Javascript:

Ver original$(".checkbox").click(function() {  
        if($("#ch_nada").prop("checked" , true)) {  
            $("#ch_nada").prop("checked" , false)
        } 
    });

Y listo

Ejemplo completo:

http://codepen.io/anon/pen/zxyJEM

Saludos

718208 · #3 (**permalink**) 21/03/2015, 14:58

Muchas gracias fede, me sirvió tu ayuda, una lastima que se tenga que llegar a javascript para eso, ojo, no digo que javascript sea lo peor o lo mejor, solo digo que sería bueno que solo se pueda hacer con html. Repito muchas gracias y Saludos!

PHPeros · #4 (**permalink**) 21/03/2015, 15:07

Cita:

Iniciado por 718208

una lastima que se tenga que llegar a javascript para eso, ojo, no digo que javascript sea lo peor o lo mejor, solo digo que sería bueno que solo se pueda hacer con html.

Claro, de ahí que se inventara DHTML