Vinken afhankelijk van tekst

Door Machiel K op 10-10-2014 16:24 gewijzigd op 10-10-2014 16:24

1.753 views

Hallo.

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/

Frank Nietbelangrijk

10-10-2014 18:47

Zo werkt het wel. Ik heb de textvelden een class "auto" meegegeven zodat niet alle input elementen er op gaan reageren:


<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;
    });
    
});

Machiel K

11-10-2014 13:05

Top, bedankt!
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?

Frank Nietbelangrijk

11-10-2014 22:28

Ja je hoeft alleen het woordje var te gebruiken bij de declaratie van een nieuwe variabele. (dus maar één keer)
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.

Machiel K

12-10-2014 13:31

Ah, duidelijke uitleg. Bedankt! :)

Reageren

Inloggen om te reageren