Uitleg radiobutton

Je kiest eerst welke waarde je wilt zien (kindermaat of volwassenen).
Deze waarde wordt in een variabele bewaard "inputValue". Je maakt nog een 2de variabele "targetBox" aan waar je de waarde van je var inputValue omzet als een een nieuwe klasse (.kindermaat of .volwassenen).

Opdracht: Verander de waarde voor de radiobuttons

Maak een nieuwe HTML-bestand en kies voor een eigen opsomming bijvoorbeeld maak een keuzelijst voor apps ofwel voor Apple ofwel voor Android. Iedereen kiest een andere opsomming! De HTML-pagina ziet er zo uit:

<form>
<p>
       <input type="radio" name="kind_volw" value="kindermaat"  checked/> Kindermaat
       <input type="radio" name="kind_volw" value="volwassenen" /> Volwassenen
   </p>
               
                        
     <div class="verberg kindermaat" style="display:block">
     	<p>
      	Maat T-shirt kind<br/>
      	<select name="maatTshirt" required>
            <option value="2 jaar - 86/94">2 jaar (86/94)</option>
            <option value="4 jaar - 96/104">4 jaar (96/104)</option>
            <option value="6 jaar - 106/116">6 jaar (106/116)</option>
            <option value="8 jaar - 118/128">8 jaar (118/128)</option>
            <option value="10 jaar - 130/140">10 jaar (130/140)</option>
            <option value="12 jaar - 142/152">12 jaar (142/152)</option>
            <option value="XS - 158">S (158)</option>
            <option value="S - 164">M (164)</option>
            <option value="M - 170">L (170)</option>
            <option value="L - 176">XL (176)v/option>
            <option value="L - 176">XXL (182)</option>
       	</select>
      	</p>
      </div>
                        
      <div class="verberg volwassenen">
         <p>
           Maat T-shirt volwassenen<br/>
            <select name="maatTshirt" required>
     			<option value="XS">XS </option>
                <option value="S">S </option>
                <option value="M">M </option>
                <option value="L">L </option>
                <option value="XL"vXL</option>
                <option value="XXL">XXL</option>
            </select>
          </p>
     </div>
	</form>

Een deel van de script ziet er zo uit:

<script>
      $(document).ready(function(){
		
		 /* roep de selector input op met het type radio */
    	$('...'). ...(function(){
			/* bewaar de waarde van het attribuut "value" in de variabele inputValue, waar de bezoeker op klikt */
        	var inputValue = $(...).attr(...);
			/* Maak een klasse (icoon) van de waarde uit het inputveld (kindermaat of volwassenen) en bewaar deze in een nieuwe variabele */
        	var targetBox = $("..." + ...);
			
			/* Als de klasse verberg niet staat bij de variabele targetBox (ofwel volwassenen ofwel kindermaat) .  verberg deze */				  
			$("...").not(targetBox). ...();
			/* Selector (variabele targetBox) .  toon    */
        	$(...). ...();
    });
});
</script>

Ik geef hieronder de ontbrekende woorden mee, nu nog in de juiste volgorde plaatsen. Veel succes! Vergeet de oefening niet op Smartschool te plaatsen.

.verberg
targetBox
show
this
hide
"value"
"." 
inputValue
'input[type="radio"]'
click

Vergeet jQuery in de head-tag te linken of er zal niets gebeuren!

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
	

De pagina bevat twee tabellen waarop we de openingsuren van vandaag markeren. Elke weekdag komt overeen met één rij binnen de tbody-tag. Merk op dat we de tabel ook starten met zondag. Dit is een bewuste keuze omdat we het rijnummer dan makkelijk kunnen koppelen aan de weekdag van het Date-object. Bekijk hier een voorbeeld.

Download hier het startbestand.

De HTML-code ziet er zo uit:

<table class="table">
    <thead>...</thead>
    <tbody>
        <tr>
            <td><b>Zondag</b></td>
            <td>Gesloten</td>
            <td>Gesloten</td>
            <<td>Geslotenv/td>
        </tr>
        ...
    </tbody>
</table>

Voeg volgende code toe in de script:

Op lijn 3 halen we de weekdag op. (zondag = 0, maandag = 1, ...). Vervolgens gaan we op lijn 4 dit getal met één verhogen om zo de juiste rij binnen tbody te markeren met een groen-gele achtergrond.

<script>
    $(function () {
        /* roep hier de datum op en bewaar in de variabele vandaag */
        var vandaag = new ...();
		
        /* roep hier de dag op en bewaar in de variabele dag */
        var dag = vandaag. ...();
			
        /* 1. Roep de selector table row op binnen de table body (:nth-child zorgt dat beide tabellen worden gelezen) */
        /* 2. We halen de weekdag op. (zondag = 0, maandag = 1, ...). Vervolgens gaan we de variabele dag 4 met één verhogen */
        /* 3. Verander de opmaak binnen tbody met een groen-gele achtergrondkleur.*/
        $('1... ...:nth-child(' + (dag + 2...) + ')'). ... ('3...', 'greenYellow');
			/* Vergeet de cijfers 1,2 en 3 niet te verwijderen */
    });
</script>

Merk op dat de pagina twee tabellen bevat en dat we daarom tr:nth-child() gebruiken en niet tr:eq(). Dit zou enkel een rij in de eerste tabel markeren.

Ik geef hieronder de ontbrekende woorden mee, nu nog in de juiste volgorde plaatsen. Veel succes! Vergeet de oefening niet op Smartschool te plaatsen.

tr
css
Date
background-color
getDay
1
tbody