Animace výsledku z checkboxů

**PetrGargulák** · 22.03.2019 12:17

Ahoj lidi,

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

Kód:

sum += parseFloat($(this).attr("rel")) || 0;

A le tohle mi nevezme animation.....

dám se celý kod...

Kód:

 
  function recalculate(){
  /*  var sum = 0;
    $("input[id*='kalkulacka-pole']:checked").each(function(){
    sum += parseFloat($(this).attr("rel")) || 0;
    
    
    }); */    
    
 /*   var sum2 = sum.toLocaleString()
    
    $(".vysledek-kalkulacky").text(sum2);
    $(".result-kalkulacky").val(sum2);     */
    
    var countTo = 0;
    $("input[id*='kalkulacka-pole']:checked").each(function() {
  var $this = $("input[id*='kalkulacka-pole']:checked");
      countTo = $this.attr('rel');
       
                  
  $({ countNum: $this.text()}).animate({
    countNum: countTo
  
  
  
  },

  {

    duration: 1000,
    easing:'linear',
    step: function() {
      $(".vysledek-kalkulacky").text(Math.floor(this.countNum));
    },
    complete: function() {
      $(".vysledek-kalkulacky").text(this.countNum);
      //alert('finished');
    }

  });  
  
  });


    
    
    
    
    
    };
    
   $("input[id*='kalkulacka-pole']").on("input", function(){
  recalculate();
  
  
  
});

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....

Kód:

    var countTo = 0;
    $("input[id*='kalkulacka-pole']:checked").each(function() {
  var $this = $("input[id*='kalkulacka-pole']:checked");
      countTo += parseFloat($this.attr('rel')) || 0 ;
       
                  
  $({ countNum: $(".vysledek-kalkulacky").text(countTo)}).animate({
    countNum: countTo
  
  
  
  },

  {

    duration: 1000,
    easing:'linear',
    step: function() {
      $(".vysledek-kalkulacky").text(Math.floor(this.countNum));
    },
    complete: function() {
      $(".vysledek-kalkulacky").text(this.countNum);
      //alert('finished');
    }

  });  
  
  });


    
    
    
    
    
    };
    
   $("input[id*='kalkulacka-pole']").on("input", function(){
  recalculate();
  
  
  
});

**Martin Schlemmer** · 22.03.2019 13:18

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

**PetrGargulák** · 22.03.2019 13:20

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

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

Kód:

                         
  
     $("input[id*='kalkulacka-pole']").change(function () {
     var total_span = 0;
     $("input[id*='kalkulacka-pole']:checked").each(function () {
         total_span += parseFloat($(this).attr("rel")) || 0;
     });
     $({counter: +$('.vysledek-kalkulacky').text()}).animate({counter: total_span},{
         duration: 500,
         step: function () {
             $('.vysledek-kalkulacky').text(Math.floor(this.counter));
         }
     });
 });

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:

Kód:

						<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['novyweb']!=''} 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['redesign']!=''} 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['mobiltablet']!=''} 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['redakcni']!=''} 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['plneniwebu']!=''} 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['socialnisite']!=''} 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['optimalizace']!=''} 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['novyeshop']!=''} 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['redesigneshop']!=''} 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['mobileshop']!=''} 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['redakcnieshop']!=''} 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['plnenieshop']!=''} 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['socialnieshop']!=''} 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['optimalizaceeshop']!=''} 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['napojenidodavatele']!=''} 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['tvorbaloga']!=''} 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['identita']!=''} 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['vizitky']!=''} 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['letaky']!=''} 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['brozury']!=''} 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['polepy']!=''} 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['billboardy']!=''} 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

Kód:

  function recalculate(){
     $("input[id*='kalkulacka-pole']").change(function () {
     var total_span = 0;
     $("input[id*='kalkulacka-pole']:checked").each(function () {
         total_span += parseFloat($(this).attr("rel")) || 0;
     });
     $({counter: $('.vysledek-kalkulacky').text()}).animate({counter: total_span},{
         duration: 500,
         step: function () {                
             $('.vysledek-kalkulacky').text(Math.round(this.counter).toLocaleString());
         }
     });
 });
    
    
    
    
    };
    
   $("input[id*='kalkulacka-pole']").on("input", function(){
  recalculate();
  
  
  
});

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

vyřešil jsem to tímto:

Kód:

    
  function recalculate(){
     $("input[id*='kalkulacka-pole']").change(function () {
     var total_span = 0;
     var sum = 0;
     var sum2 = 0; 
     $("input[id*='kalkulacka-pole']:checked").each(function () {
         total_span += parseFloat($(this).attr("rel")) || 0;
         
         
     });
       
       sum = total_span;
       sum2 = total_span.toLocaleString() ;
      $(".result-kalkulacky").val(sum2); 
        console.log(sum);
     $({counter: +$('.vysledek-kalkulacky').text()}).animate({counter: sum},{
         duration: 500,
         step: function (now) {                           
             $('.vysledek-kalkulacky').text(Math.ceil(now));
               
             
         }
     });
 });
    
    
    
    
    };  
 
   $("input[id*='kalkulacka-pole']").on("input", function(){
  recalculate();
  
  
  
});

Animace výsledku z checkboxů

Nástroje témat

Prohledej téma