Animace výsledku z checkboxů

Petr Gargulák

(12 hodnocení)

22. 3. 2019 12:17:57

Ahoj lidi,

nevěděl byste někdo prosím jak zapsat animaci resultu ze zaškrtlých checkboxů... sčítají se pomocí tohoto:

A le tohle mi nevezme animation.....

dám se celý kod...

Ten zakomentovaný kod funguje skvěle, akorát nevím jak ho mám dostat do animace... potřebuji součet těch checkboxů animovat a né jenom po zaškrtnutí jednoho checkboxu animovat jednu částku...

---------- Příspěvek doplněn 22.03.2019 v 12:46 ----------

Zkouším to dále..takto mi to spočítá vždy první hodnotu a sčítá pak jenom tu první hodnotu po zakliknutí na jiný checkbox s jinou hodnotou....

22. 3. 2019 12:17:57

https://webtrh.cz/diskuse/animace-vysledku-z-checkboxu#reply1393931

Martin Schlemmer

(36 hodnocení)

22. 3. 2019 13:18:48

Vytvořte živou ukázku na JSFiddle nebo na podobném serveru.

22. 3. 2019 13:18:48

https://webtrh.cz/diskuse/animace-vysledku-z-checkboxu#reply1393930

Petr Gargulák

(12 hodnocení)

22. 3. 2019 13:20:27

Už jsem to asi vyřešil...

Tímhle kodem: Jen ty čísla mi nezůstávají celé.... a zaokrouhluje se to....

Tady je zdroj:

javascript - Counter animation to a calculated value - Stack Overflow

---------- Příspěvek doplněn 22.03.2019 v 13:56 ----------

Tady se můžete podívat co to teď dělá, čím se toho zbavím ?

Online kalkulace | TvorbaWebuPraha.cz

---------- Příspěvek doplněn 22.03.2019 v 14:36 ----------

html:

<form action="?prilezitostForm=1" method="post" id="prilezitostForm">																												<div class="form-group">								<label class="heading heading--small">Webové stránky </label>								<label class="custom-control custom-checkbox">									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="19000" name="novyweb"{if $post!=''} checked{/if}>									<span class="custom-control-indicator"></span>									<span class="custom-control-description">Tvorba nového webu</span>								</label>								<label class="custom-control custom-checkbox">									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="17000"  name="redesign"{if $post!=''} checked{/if}>									<span class="custom-control-indicator"></span>									<span class="custom-control-description">Redesign již fungujícího webu </span>								</label>								<label class="custom-control custom-checkbox">									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="3000" name="mobiltablet"{if $post!=''} checked{/if}>									<span class="custom-control-indicator"></span>									<span class="custom-control-description">Verze pro mobil a tablet</span>								</label>								<label class="custom-control custom-checkbox">									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="1500" name="redakcni"{if $post!=''} checked{/if}>									<span class="custom-control-indicator"></span>									<span class="custom-control-description">Redakční systém pro správu webu</span>								</label>								<label class="custom-control custom-checkbox">									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="3000" name="plneniwebu"{if $post!=''} checked{/if}>									<span class="custom-control-indicator"></span>									<span class="custom-control-description">Tvorba textů, plnění webu</span>								</label>								<label class="custom-control custom-checkbox">									<input type="checkbox"  id="kalkulacka-pole" class="custom-control-input" rel="1500" name="socialnisite"{if $post!=''} checked{/if}>									<span class="custom-control-indicator"></span>									<span class="custom-control-description">Sociální sítě</span>								</label>								<label class="custom-control custom-checkbox">									<input type="checkbox" id="kalkulacka-pole"  class="custom-control-input" rel="4000"  name="optimalizace"{if $post!=''} checked{/if}>									<span class="custom-control-indicator"></span>									<span class="custom-control-description">Optimalizace pro vyhledávače</span>								</label>               </div>                                                 	<div class="form-group">								<label class="heading heading--small">									Eshopy								</label>                								<label class="custom-control custom-checkbox">									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="29000" name="novyeshop"{if $post!=''} checked{/if}>									<span class="custom-control-indicator"></span>									<span class="custom-control-description">Tvorba nového eshopu</span>								</label>								<label class="custom-control custom-checkbox">									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="24000" name="redesigneshop"{if $post!=''} checked{/if}>									<span class="custom-control-indicator"></span>									<span class="custom-control-description">Redesign již fungujícího webu</span>								</label>								<label class="custom-control custom-checkbox">									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="7000" name="mobileshop"{if $post!=''} checked{/if}>									<span class="custom-control-indicator"></span>									<span class="custom-control-description">Verze pro mobil a tablet</span>								</label>								<label class="custom-control custom-checkbox">									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="3000" name="redakcnieshop"{if $post!=''} checked{/if}>									<span class="custom-control-indicator"></span>									<span class="custom-control-description">Redakční systém pro správu eshopu</span>								</label>								<label class="custom-control custom-checkbox">									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="4000" name="plnenieshop"{if $post!=''} checked{/if}>									<span class="custom-control-indicator"></span>									<span class="custom-control-description">Tvorba textů, plnění eshopu</span>								</label>								<label class="custom-control custom-checkbox">									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="1500" name="socialnieshop"{if $post!=''} checked{/if}>									<span class="custom-control-indicator"></span>									<span class="custom-control-description">Sociální sítě</span>								</label>								<label class="custom-control custom-checkbox">									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="8000" name="optimalizaceeshop"{if $post!=''} checked{/if}>									<span class="custom-control-indicator"></span>									<span class="custom-control-description">Optimalizace pro vyhledávače</span>								</label>								<label class="custom-control custom-checkbox">									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="5000" name="napojenidodavatele"{if $post!=''} checked{/if}>									<span class="custom-control-indicator"></span>									<span class="custom-control-description">Napojení na dodavatele</span>								</label>                </div>                                                                <div class="form-group">								<label class="heading heading--small">									Logo, identita a tiskoviny								</label>                								<label class="custom-control custom-checkbox">									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="2000" name="tvorbaloga"{if $post!=''} checked{/if}>									<span class="custom-control-indicator"></span>									<span class="custom-control-description">Tvorba loga</span>								</label>								<label class="custom-control custom-checkbox">									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="2500" name="identita"{if $post!=''} checked{/if}>									<span class="custom-control-indicator"></span>									<span class="custom-control-description">Firemní identita</span>								</label>								<label class="custom-control custom-checkbox">									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="500" name="vizitky"{if $post!=''} checked{/if}>									<span class="custom-control-indicator"></span>									<span class="custom-control-description">Vizitky</span>								</label>								<label class="custom-control custom-checkbox">									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="2000" name="letaky"{if $post!=''} checked{/if}>									<span class="custom-control-indicator"></span>									<span class="custom-control-description">Letáky, plakáty</span>								</label>								<label class="custom-control custom-checkbox">									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="4000" name="brozury"{if $post!=''} checked{/if}>									<span class="custom-control-indicator"></span>									<span class="custom-control-description">Brožury, katalogy</span>								</label>								<label class="custom-control custom-checkbox">									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="2500" name="polepy"{if $post!=''} checked{/if}>									<span class="custom-control-indicator"></span>									<span class="custom-control-description">Polepy vozů</span>								</label>                	<label class="custom-control custom-checkbox">									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="1500" name="billboardy"{if $post!=''} checked{/if}>									<span class="custom-control-indicator"></span>									<span class="custom-control-description">Billboardy</span>								</label>							</div>							               <div class="form-group">               <div class="row">               <div class="col-12 col-lg-7">               <label class="heading heading--small d-inline-block float-left">Orientační cena:</label>               <div class="vysledek-kalkulacky d-inline-block float-left counter">0</div> <span class="cenakc d-inline-block float-left">Kč</span>               <input type="hidden" class="result-kalkulacky" name="kalkulacka-vysledek" />               </div>

A jquery

---------- Příspěvek doplněn 22.03.2019 v 17:58 ----------

vyřešil jsem to tímto:

22. 3. 2019 13:20:27

https://webtrh.cz/diskuse/animace-vysledku-z-checkboxu#reply1393929

Pro odpověď se přihlašte.

Přihlásit