checkbox che attiva checkbox e ne disattiva altri

**daduz** · 18-10-2014, 00:59

ciao ragazzi ho questo problema:

ho tre menu :
MENU BASE
MENU MEDIO
MENU LARGE

ognuno di questi menu ha dei piatti associati che pesco da un db.
dovrei inserire a fianco di ognuno di questi menu un pulsante checkbox che attivi il menu desiderato e fino qui tutto ok.
Il problema mi viene fuori quando, spuntato ad esempio il MENU BASE, devo rendere spuntabili i 3 check del MENU BASE.
E se attivo il MENU MEDIO o LARGE vale lo stesso discorso.
In pratica ogni check MENU mi deve escludere il click su altri piatti di altri menu.
Sto impazzendo

Grazie all' anima pia che mi dà una mano

**daduz** · 18-10-2014, 01:06

scusate mi sono dimenticato l' esempio (in realta ho piu piatti per menu ma iniziamo dal basso)

**cavicchiandrea** · 18-10-2014, 11:15

http://webandylab.altervista.org/boxradio.php

**daduz** · 18-10-2014, 11:34

ciao Andrea!
sembra proprio ciò che mi serve, provo ad adattarlo e ti faccio sapere.
a presto e grazieeeeee

**daduz** · 18-10-2014, 13:23

rieccomi,
l' ho adattato secondo le mie esigenze e mi pare funziona, posto il codice che ho ora (quello in php serve a me solo per vedere che passa i dati

)

codice HTML:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">

<?php
$menubase_primo=$_POST['menubase_primo'];
$menubase_contorno=$_POST['menubase_contorno'];
echo "Menu Base Primo = ".$menubase_primo."<br>";
echo "Menu Base Contorno = ".$menubase_contorno."<br>";
echo "<br><br>";
$menumedio_secondo=$_POST['menumedio_secondo'];
$menumedio_contorno=$_POST['menumedio_contorno'];
echo "Menu Medio Secondo = ".$menumedio_secondo."<br>";
echo "Menu Medio Contorno = ".$menumedio_contorno."<br>";
echo "<br><br>";
$menucompleto_primo=$_POST['menucompleto_primo'];
$menucompleto_secondo=$_POST['menucompleto_secondo'];
$menucompleto_contorno=$_POST['menucompleto_contorno'];
echo "Menu Completo Primo = ".$menucompleto_primo."<br>";
echo "Menu Completo Secondo = ".$menucompleto_secondo."<br>";
echo "Menu Completo Contorno = ".$menucompleto_contorno."<br>";
echo "<br><br>";
?>


<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
function attiva(opt){
    var option = document.getElementById('r'+opt).getElementsByTagName("input")
    var box = document.getElementsByClassName("box")

                
        for(var k=0; k<box.length; k++){
            if((opt-1) != k){
                box.item(k).checked=false
                for(var y=0; y<document.getElementsByClassName("sel").length; y++){
                document.getElementsByClassName("sel").item(y).setAttribute("disabled","disabled")
                document.getElementsByClassName("sel").item(y).checked=false
                }    
            }
        }
for(var i=0; i<option.length; i++){
    if(document.getElementsByName("m"+opt).item(0).checked){
                option[i].removeAttribute("disabled")
            }else{
                option[i].setAttribute("disabled","disabled")
                option[i].checked=false
            }
        }
    }            

</script>
<title>Home page</title>
</head>
<body>
<form action="" name="sceltamenu" method="post">
<input name="m1" class="box" type="checkbox" value="" onClick="attiva(1)">
<p id="r1">
<input name="menubase_primo" class="sel" disabled type="radio" value="primo1">
<input name="menubase_primo" class="sel"  disabled type="radio" value="primo2">
<input name="menubase_primo" class="sel"  disabled type="radio" value="primo3">
<br>
<input name="menubase_contorno" class="sel"  disabled type="radio" value="contorno1">
<input name="menubase_contorno" class="sel"  disabled type="radio" value="contorno2">
</p>

<input name="m2" class="box" type="checkbox" value="" onClick="attiva(2)">
<p id="r2">
<input name="menumedio_secondo" class="sel"  disabled type="radio" value="secondo1">
<input name="menumedio_secondo" class="sel"  disabled type="radio" value="secondo2">
<input name="menumedio_secondo" class="sel"  disabled type="radio" value="secondo3">
<br>
<input name="menumedio_contorno" class="sel"  disabled type="radio" value="contorno1">
<input name="menumedio_contorno" class="sel"  disabled type="radio" value="contorno2">
</p>
<input name="m3" class="box" type="checkbox" value="" onClick="attiva(3)">
<p id="r3">
<input name="menucompleto_primo" class="sel"  disabled type="radio" value="primo1">
<input name="menucompleto_primo" class="sel"  disabled type="radio" value="primo2">
<input name="menucompleto_primo" class="sel"  disabled type="radio" value="primo3">
<br>
<input name="menucompleto_secondo" class="sel"  disabled type="radio" value="secondo1">
<input name="menucompleto_secondo" class="sel"  disabled type="radio" value="secondo2">
<input name="menucompleto_secondo" class="sel"  disabled type="radio" value="secondo3">
<br>
<input name="menucompleto_contorno" class="sel"  disabled type="radio" value="contorno1">
<input name="menucompleto_contorno" class="sel"  disabled type="radio" value="contorno2">
</p>
<input type="submit" name="button" id="button" value="Invia">
</form>
</body>
</html>

adesso ti/vi chiedo x cortesia :

alla spunta di uno dei 3 checkbox dei menu vorrei che automaticamente si selezionassero i rispettivi primi piatti (es. spunto menu base e mi si devono attivare primo1 e contorno1 dello stesso menu base)
spuntando il menumedio si deseleziona tutto e si attiva secondo1 e contorno1 del menumedio....e via dicendo per il menucompleto

una volta fatto ciò i valori dei vari menù composti come li passo alla pagina conferma.php?

grazie mille per la disponibilità!!!!

**daduz** · 18-10-2014, 14:05

una volta fatto ciò i valori dei vari menù composti come li passo alla pagina conferma.php?
reindirizzamento risolto sono un po fuso!

dovrebbe rimanere solo il discorso cheked..!

**daduz** · 18-10-2014, 15:48

rieccomi,
a parte il checked ho risolto e posto il codice del form se servisse intanto a qualcuno:

codice HTML:

<form action="../pausa-pranzo-conferma-prenotazione" name="sceltamenu" method="post">
<input type="hidden" name="data" value="19/10/2014">
<input type="hidden" name="dataing" value="2014-10-19">
<input type="hidden" name="menu" value="BIANCO">
  <table width="100%" border="0" cellpadding="0" cellspacing="0" id="prenotapasti" class="davidetabella">

<tr>
  <td width="20%">&nbsp;</td>
  <td width="20%"><b>Opzione 1</b></td>
  <td width="20%"><b>Opzione</b></td>
  <td width="20%"><b>Opzione</b></td>
  <td width="20%"><b>Opzione</b></td>
</tr>

<tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
</tr>
<tr>
  <td><b>MENU a e Euro 6,50</b></td>
  <td>primo1</td>
  <td>primo2</td>
  <td>primo3</td>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td>contorno1</td>
  <td>contorno2</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
</tr>

<tr>
<td>
<input name="m1" class="box" type="checkbox" value="" onClick="attiva(1)"><b>MENU a e Euro 6,50</b>
</td>
      <td colspan="4">
<p id="r1">
<input type="radio" class="sel" name="menubase_primo" value="RISO1" disabled>RISO1 
<input type="radio"class="sel" name="menubase_primo" value="RISO2" disabled>RISO2 
<input type="radio"class="sel" name="menubase_primo" value="RISO3" disabled>RISO3 
<br>
<input type="radio"class="sel" name="menubase_contorno" value="PATATE1" disabled>PATATE1 
<input type="radio"class="sel"  id ="PATATE2" name="menubase_contorno" value="PATATE2" disabled>PATATE2 
</p>
</td>
</tr>
    <tr>
        <td colspan="5">
</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
<tr>
<td>
<input name="m2" class="box" type="checkbox" value="" onClick="attiva(2)"><b>MENU a e Euro 8,00</b>
</td>
<td colspan="4">
<p id="r2">
<input type="radio" class="sel" name="menumedio_secondo" value="POLLO1" disabled>POLLO1 
<input type="radio"class="sel" name="menumedio_secondo" value="POLLO2" disabled>POLLO2 
<input type="radio"class="sel" name="menumedio_secondo" value="POLLO3" disabled>POLLO3 
<br>
<input type="radio"class="sel" name="menumedio_contorno" value="PATATE1" disabled>PATATE1 
<input type="radio"class="sel" name="menumedio_contorno" value="PATATE2" disabled>PATATE2 
</p>
</td>
</tr>







    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>

	  <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
<tr>
<td>
<input name="m3" class="box" type="checkbox" value="" onClick="attiva(3)"><b>MENU a e Euro 12,00</b>
</td>
<td colspan="4">
<p id="r3">
<input type="radio" class="sel" name="menucompleto_primo" value="RISO1" disabled>RISO1 
<input type="radio"class="sel" name="menucompleto_primo" value="RISO2" disabled>RISO2 
<input type="radio"class="sel" name="menucompleto_primo" value="RISO3" disabled>RISO3 
<br>
<input type="radio" class="sel" name="menucompleto_secondo" value="POLLO1" disabled>POLLO1 
<input type="radio"class="sel" name="menucompleto_secondo" value="POLLO2" disabled>POLLO2 
<input type="radio"class="sel" name="menucompleto_secondo" value="POLLO3" disabled>POLLO3 
<br>
<input type="radio"class="sel" name="menucompleto_contorno" value="PATATE1" disabled>PATATE1 
<input type="radio"class="sel"  name="menucompleto_contorno" value="PATATE2" disabled>PATATE2 
</p>
</td>
</tr>

    <tr>
      <td colspan="5" align="right">
<input type="reset" name="reset" id="reset" value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Reset MENU&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Scegli postazione tavolo*</td>
      <td>
              <input name="postoscelto" type="radio" value="interno" checked>interno (posti liberi 100)                <br>
                <input name="postoscelto" type="radio" value="esterno" unchecked>esterno (posti liberi 1000)        
      </td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Inserisci il tuo nome*</td>
      <td colspan="2">
  <input name="nome" type="text" id="nome" placeholder='Inserisci il tuo  nome' value="" size="35" maxlength="35"><script type="text/javascript">
var nome = new LiveValidation('nome', { validMessage: "OK" });
nome.add(Validate.Presence, { failureMessage: "Obbligatorio" });
nome.add(Validate.Length,{ minimum: 2, maximum: 100 },{ failureMessage: "Consentiti minimo 2 e massimo 100 caratteri" });
</script>      </td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Inserisci la tua mail*</td>
      <td colspan="2">
  <input name="mail" type="text" id="mail" placeholder='Inserisci la tua mail' value="" size="35" maxlength="50"><script type="text/javascript">
var mail = new LiveValidation('mail', { validMessage: "OK" });
mail.add(Validate.Presence, { failureMessage: "Obbligatorio" });
mail.add(Validate.Email, { failureMessage: "Mail non valida" } );
mail.add(Validate.Length,{ minimum: 2, maximum: 100 },{ failureMessage: "Consentiti minimo 2 e massimo 100 caratteri" });
</script>
      </td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Inserisci il tuo telefono*</td>
      <td colspan="2">
  <input name="telefono" type="text" id="telefono" placeholder='Inserisci il tuo telefono' value="" size="35" maxlength="35"><script type="text/javascript">
var telefono = new LiveValidation('telefono', { validMessage: "OK" });
telefono.add(Validate.Presence, { failureMessage: "Obbligatorio" });
telefono.add(Validate.Length,{ minimum: 2, maximum: 30 },{ failureMessage: "Consentiti minimo 2 e massimo 30 caratteri" });
telefono.add(Validate.Numericality,{ NotAtNumberMessage:"Inserire solo numeri" });
</script>      </td>
      <td></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td colspan="2">&nbsp;</td>
      <td colspan="3" align="left">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="5"></td>
    </tr><tr>
      <td colspan="5" align="center"><input type="submit" name="submit" id="submit" value="Visualizza riepilogo prenotazione"></td>

  </tr>
  </table>


<input type="hidden" name="tipoevento" value="PAUSAPRANZO">
<input type="hidden" name="primo1" value="RISO1">
<input type="hidden" name="primo2" value="RISO2">
<input type="hidden" name="primo3" value="RISO3">
<input type="hidden" name="secondo1" value="POLLO1">
<input type="hidden" name="secondo2" value="POLLO2">
<input type="hidden" name="secondo3" value="POLLO3">
<input type="hidden" name="contorno1" value="PATATE1">
<input type="hidden" name="contorno2" value="PATATE2">
</form>

il tutto mi funziona solo se il tag id al suo interno non racchiude tag <tr> o <td> e quindi i piatti non mi si incolonnano dove vorrei..ma sono uno di seguito all' altro

scusate forse mi sto perdendo in un bicchier d' acqua ma sono 3 gg che sto incollato a sta pagina

tks!!

**daduz** · 19-10-2014, 21:55

ho risolto modificando cosi il js

codice HTML:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>

<script type="text/javascript">

function attiva(opt){
    
    var option = document.getElementsByTagName("tr")

    var option = document.getElementById('r'+opt).getElementsByTagName("input")

    var box = document.getElementsByClassName("box")



if(document.getElementsByTagName("tr")){                

        for(var k=0; k<box.length; k++){

            if((opt-1) != k){

                box.item(k).checked=false

                for(var y=0; y<document.getElementsByClassName("sel").length; y++){

                document.getElementsByClassName("sel").item(y).setAttribute("disabled","disabled")

                document.getElementsByClassName("sel").item(y).checked=false

                }    

            }

        }

for(var i=0; i<option.length; i++){




    if(document.getElementsByName("m"+opt).item(0).checked){

                option[i].removeAttribute("disabled")

            }else{

                option[i].setAttribute("disabled","disabled")

                option[i].checked=false

            }

        }

    }            

}

</script>

mi rimane solo il discorso checked

**cavicchiandrea** · 20-10-2014, 00:45

Ho aggiornato l'esempio dovrebbe andare bene.

**daduz** · 20-10-2014, 21:59

Ciao Andrea perfetto grazie sei stato gentilissimo!!

Discussione: checkbox che attiva checkbox e ne disattiva altri

Strumenti discussione

Ricerca discussione

Visualizza

checkbox che attiva checkbox e ne disattiva altri

Permessi di invio