Vinken afhankelijk van tekst
Ik ben bezig met een formulier voor een opdrachtgever.
Nu ben ik met jQuery een formulier aan het verbeteren.
Zo wil ik dat als er iet in de tekstbox getypt wordt, het vinkje bij de bijhorende rij aangevinkt zal worden.
Vervolgens, als de tekstbox weer leeg wordt gehaald, moet het vinkje ontvinkt worden.
De eerste keer vullen en leeghalen gaat volgens plan. Als je vervolgens zonder te reloaden nog eens iets typt, gaat het vinkje niet opnieuw aan.
Kan iemand mij helpen, om ervoor te zorgen dat je oneindig een tekst in kan vullen en vervolgens het vinkje zijn werk blijft doen?
Alvast bedankt.
http://jsfiddle.net/MachielK_/ascfq0k3/
Gewijzigd op 10/10/2014 16:24:48 door Machiel K
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<table>
<tr>
<td><input type="checkbox" name="period1y" value="yes" disabled> 1e uur (08:10-09:00)</td>
<td><input class="auto" type="text" name="period1" /></td>
</tr>
<tr>
<td>
<input type="checkbox" name="period2y" value="yes" disabled> 2e uur (09:00-09:50)</td>
<td><input class="auto" type="text" name="period2" /></td>
</tr>
<tr>
<td><input type="checkbox" name="period3y" value="yes" disabled> 3e uur (09:50-10:40)</td>
<td><input class="auto" type="text" name="period3" /></td>
</tr>
<tr>
<td><input type="checkbox" name="period4y" value="yes" disabled> 4e uur (11:05-11:55)</td>
<td><input class="auto" type="text" name="period4" /></td>
</tr>
</table>
jQuery(function () {
$('.auto').keyup(function() {
var chk = $( this ).attr("name");
if($( this ).val().length > 0)
$( "input[name=" + chk + "y]" ).prop("checked", "checked");
else
$( "input[name=" + chk + "y]" ).removeAttr("checked");
return false;
});
});
<tr>
<td><input type="checkbox" name="period1y" value="yes" disabled> 1e uur (08:10-09:00)</td>
<td><input class="auto" type="text" name="period1" /></td>
</tr>
<tr>
<td>
<input type="checkbox" name="period2y" value="yes" disabled> 2e uur (09:00-09:50)</td>
<td><input class="auto" type="text" name="period2" /></td>
</tr>
<tr>
<td><input type="checkbox" name="period3y" value="yes" disabled> 3e uur (09:50-10:40)</td>
<td><input class="auto" type="text" name="period3" /></td>
</tr>
<tr>
<td><input type="checkbox" name="period4y" value="yes" disabled> 4e uur (11:05-11:55)</td>
<td><input class="auto" type="text" name="period4" /></td>
</tr>
</table>
jQuery(function () {
$('.auto').keyup(function() {
var chk = $( this ).attr("name");
if($( this ).val().length > 0)
$( "input[name=" + chk + "y]" ).prop("checked", "checked");
else
$( "input[name=" + chk + "y]" ).removeAttr("checked");
return false;
});
});
Omdat er in totaal 12 periods zijn, qua tekstboxen, heb ik het mijzelf nog even makkelijker gemaakt. $('.auto) vervangen door $('input[type=text]).
Alleen $('input') werkt ook al goed. Het ligt dus aan mijn manier van variabelen aanmaken en het checken van de waarde denk ik?
Nog even een vraagje, zodat ik hier ook nog weer iets van leer: waar staat die return false voor?
return false; zorgt ervoor dat je pagina niet refreshed. Het gaat hier namelijk om een druk op een link. ( <a></a> )
Normaal verlaat je daarmee de pagina maar nu niet meer.
.prop ten opzichte van .attr blijft ook een beetje vaag. Het bleek te werken wanneeer ik .attr verving voor .prop.
.removeAttr is in mijn beleving beter omdat je in HTML ook de check attribute weglaat als je wilt dat de checkbox niet aangevinkt is.