dimanche 2 octobre 2016

make one checkbox enable all others purely with javascript

I'm really struggling with this. I want to use Jquery for this but it's not allowed unfortunately. So for a little exercise I need to let one checkbox check enable all other checkboxes. No it doesn't need to check them but just enable them. Here is my HTML code:

<table border="0">
   <tr>
    <th id="thproductid"; colspan="2"; width="300px">Pizza</th>
    <th id="thproductid"; colspan="2"; width="150px"><input type="checkbox" name="pizzamedium" id="checkpizzamedium" onclick="Activeer(this)"> Medium</th>
    <th id="thproductid"; colspan="3"; width="50px">Aantal</th>
    <th width="100px"></th>
    <th id="thproductid"; colspan="2"; width="150px"><input type="checkbox" name="pizzalarge" id="checkpizzalarge" onclick="Activeer(this)"> Large</th>
    <th id="thproductid"; colspan="3"; width="50px">Aantal</th>
    <th width="100px"></th>
   </tr>
   <tr>
    <th id="tdid">1</th>
    <td id="tdproductid"> Margeritha</td>
    <td id="tdprijsid"> &#8364 7,50</td>
    <td id="tdcheckboxid"><input type="checkbox" name="pizzamedium" id="Margeritham" value="Pizza Margeritha M" onclick="" disabled></td>
    <td><input type="button" id="plusknopmargerithaM" value=" + " onclick="" disabled></td>
    <td><input type="button" id="minknopmargerithaM" value=" - " onclick="" disabled></td>
    <td><input type="text" size="5" name="aantalpizzasmargerithaM" id="aantalpizzasmargerithaM" value="0" disabled></td>
    <td id="tdtoevoegenknopid"; align="center" class="verstopt"><input disabled type="button" id="bestelknopmargarithaM" value="Toevoegen" onclick=""></td>
    <td id="tdprijsid"> &#8364 12,00</td>
    <td id="tdcheckboxid"><input disabled type="checkbox" name="pizzalarge" id="Margerithal" value="Pizza Margeritha L" onclick=""></td>
    <td><input disabled type="button" id="plusknopmargerithaL" value=" + " onclick=""></td>
    <td><input disabled type="button" id="minknopmargerithaL" value=" - " onclick=""></td>
    <td><input disabled type="text" size="5" name="aantalpizzasmargerithaL" id="aantalpizzasmargerithaL" value="0"></td>
    <td id="tdtoevoegenknopid"; align="center" class="verstopt"><input disabled type="button" id="bestelknopmargarithaL" value="Toevoegen" onclick=""></td>
   </tr>
   <tr>
    <th id="tdid">2</th>
    <td id="tdproductid"> Bolognaise</td>
    <td id="tdprijsid"> &#8364 9,00</td>
    <td id="tdcheckboxid"><input type="checkbox" name="pizzamedium" id="Bolognaisem" value="Pizza Bolognaise M" onclick="" disabled></td>
    <td><input disabled type="button" id="plusknopbolognaiseM" value=" + " onclick=""></td>
    <td><input disabled type="button" id="minknopbolognaiseM" value=" - " onclick=""></td>
    <td><input type="text" disabled size="5" name="aantalpizzasbolognaiseM" id="aantalpizzasbolognaiseM" value="0"></td>
    <td id="tdtoevoegenknopid"; align="center" class="verstopt"><input type="button" disabled id="bestelknopbolognaiseM" value="Toevoegen" onclick=""></td>
    <td id="tdprijsid"> &#8364 13,50</td>
    <td id="tdcheckboxid"><input type="checkbox" name="pizzalarge" id="Bolognaisel" value="Pizza Bolognaise L" onclick="" disabled></td>
    <td><input type="button" id="plusknopbolognaiseL" value=" + " onclick="" disabled></td>
    <td><input type="button" id="minknopbolognaiseL" value=" - " onclick="" disabled></td>
    <td><input type="text" size="5" name="aantalpizzasbolognaiseL" id="aantalpizzasbolognaiseL" value="0" disabled></td>
    <td id="tdtoevoegenknopid"; align="center" class="verstopt"><input type="button" id="bestelknopbolognaiseL" value="Toevoegen" onclick="" disabled></td>
   </tr>
   <tr>
    <th id="tdid">3</th>
    <td id="tdproductid"> Calzone</td>
    <td id="tdprijsid"> &#8364 10,00</td>
    <td id="tdcheckboxid"><input type="checkbox" name="pizzamedium" id="Calzonem" value="Pizza Calzone M" onclick="" disabled></td>
    <td><input type="button" id="plusknopcalzoneM" value=" + " onclick="" disabled></td>
    <td><input type="button" id="minknopcalzoneM" value=" - " onclick="" disabled></td>
    <td><input type="text" size="5" name="aantalpizzascalzoneM" id="aantalpizzascalzoneM" value="0" disabled></td>
    <td id="tdtoevoegenknopid"; align="center" class="verstopt"><input type="button" id="bestelknopcalzoneM" value="Toevoegen" onclick="" disabled></td>
    <td id="tdprijsid"> &#8364 16,50</td>
    <td id="tdcheckboxid"><input type="checkbox" name="pizzalarge" id="Calzonel" value="Pizza Calzone L" onclick="" disabled></td>
    <td><input type="button" id="plusknopcalzoneL" value=" + " onclick="" disabled></td>
    <td><input type="button" id="minknopcalzoneL" value=" - " onclick="" disabled></td>
    <td><input type="text" size="5" name="aantalpizzascalzoneL" id="aantalpizzascalzoneL" value="0" disabled></td>
    <td id="tdtoevoegenknopid"; align="center" class="verstopt"><input type="button" id="bestelknopcalzoneL" value="Toevoegen" onclick="" disabled></td>
   </tr>
   <tr>
    <th id="tdid">4</th>
    <td id="tdproductid"> Pollo</td>
    <td id="tdprijsid"> &#8364 10,00</td>
    <td id="tdcheckboxid"><input type="checkbox" name="pizzamedium" id="Pollom" value="Pizza Pollo M" onclick="" disabled></td>
    <td><input type="button" id="plusknoppolloM" value=" + " onclick..

Here is my JS code:

function Activeer(adres, checkbox1id, checkbox2id, checkbox3id, checkbox4id, checkbox5id, checkbox6id, checkbox7id, checkbox8id) {
    if(adres.checked) {
        document.getElementById(checkbox1id).disabled = "";
  document.getElementById(checkbox2id).disabled = "";
  document.getElementById(checkbox3id).disabled = "";
  document.getElementById(checkbox4id).disabled = "";
  document.getElementById(checkbox5id).disabled = "";
  document.getElementById(checkbox6id).disabled = "";
  document.getElementById(checkbox7id).disabled = "";
  document.getElementById(checkbox8id).disabled = "";
    }
}



Aucun commentaire:

Enregistrer un commentaire