расчет нескольких элементов ввода с помощью jquery

Как сделать простой расчет с помощью JQuery? Я хочу пользователя Флажки, Радио и выпадающие списки, но это не будет работать. Я получаю значения каждого типа, но я не могу получить всю переменную для вывода суммы всех. Возможно, мне нужно сообщить сценарию, что он должен что-то делать onChange(), но как?расчет нескольких элементов ввода с помощью jquery

jQuery(document).ready(function() { 

      jQuery("input[type=checkbox]").click(function() { 
       var total_eins = 0; 
       jQuery("input[type=checkbox]:checked").each(function() { 

        total_eins += parseFloat(jQuery(this).val()); 

       }); 

       jQuery('#total_eins').html(total_eins + ' EUR'); 

      }); 

      jQuery('#cat').on('change', function() { 
       var selected = jQuery('#cat'); 
       var total_zwei = ""; 

       total_zwei += selected.val(); 

       jQuery('#total_zwei').html(total_zwei + ' EUR'); 

      }); 
    jQuery('#all').onchange(
     total += number(total_eins) + number(total_zwei); 
     jQuery('#total').html(total + ' EUR'); 
    )}; 

});

HTML

<div id="all"> 
<label><input type="checkbox" class="option" value="100" /> 1<br/></label> 
<label><input type="checkbox" class="option" value="100" /> 2<br/></label> 
<label><input type="checkbox" class="option" value="100" /> 3<br/></label> 
<label><input type="checkbox" class="option" value="100" /> 4<br/></label> 
<div id="total_eins" type="text">0 EUR</div> 

<select id="cat"> 
    <option value="100">test</option> 
    <option value="200">test2</option> 
</select> 
<div id="total_zwei" type="text">0 EUR</div> 
</div> 

<div id="total" type="text">0 EUR</div>

источник

2015-02-25 MCG

Просто редактировать 4 строки.

Просто измените событие (# все-OnChange) с функцией (всего()), и назвать его, когда вам нужно:

jQuery(document).ready(function() { 

      jQuery("input[type=checkbox]").click(function() { 
       var total_eins = 0; 
       jQuery("input[type=checkbox]:checked").each(function() { 

        total_eins += parseFloat(jQuery(this).val()); 

       }); 

       jQuery('#total_eins').html(total_eins + ' EUR'); 
       total(); // calculate it when any checkbox is changed 
      }); 

      jQuery('#cat').on('change', function() { 
       var selected = jQuery('#cat'); 
       var total_zwei = ""; 

       total_zwei += selected.val(); 

       jQuery('#total_zwei').html(total_zwei + ' EUR'); 
       total(); // calculate it when the selectbox changes 
      }); 
    function total(){ //change the function name 
     total += number(total_eins) + number(total_zwei); 
     jQuery('#total').html(total + ' EUR'); 
    }; // change how it closes 

});

Полный код: проверено:

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
</head> 
<script> 
jQuery(document).ready(function() { 
    jQuery("input[type=checkbox]").click(function() { 
     var total_eins = GetEinsTotal(); 
     jQuery('#total_eins').html(total_eins + ' EUR'); 
    }); 
    jQuery('#cat').on('change', function() { 
     var selected = $(this); 
     var total_zwei = ""; 
     total_zwei += selected.val(); 
     jQuery('#total_zwei').html(total_zwei + ' EUR'); 
    }); 
    jQuery('#all').on('change', function() { 
     var total_eins = GetEinsTotal(); 
     var total_zwei = jQuery('#cat').val(); 
     var total = total_eins + parseInt(total_zwei); 
     jQuery('#total').html(total + ' EUR'); 
    }); 
}); 

function GetEinsTotal() { 
    var total_eins = 0; 
    jQuery("input[type=checkbox]:checked").each(function() { 
     total_eins += parseFloat(jQuery(this).val()); 
    }); 

    return total_eins; 
} 
</script> 
<body> 
<div id="all"> 
<label><input type="checkbox" class="option" value="100" /> 1<br/></label> 
<label><input type="checkbox" class="option" value="100" /> 2<br/></label> 
<label><input type="checkbox" class="option" value="100" /> 3<br/></label> 
<label><input type="checkbox" class="option" value="100" /> 4<br/></label> 
<div id="total_eins" type="text">0 EUR</div> 

<select id="cat"> 
    <option value="100">test</option> 
    <option value="200">test2</option> 
</select> 
<div id="total_zwei" type="text">0 EUR</div> 
</div> 

<div id="total" type="text">0 EUR</div> 
</body> 
</html>

И оно работает!

источник

2015-02-25 16:50:52

Эй Карлос, делает Sence, но стиль не изменились ценности. Любая другая идея? – MCG

Обновлено и проверено. –

Вы можете использовать следующий JavaScript:

jQuery(document).ready(
    function($) 
    { 
     /** 
     * The following function will always calculate the Total 
     */ 
     function getTotal(){ 
      var $total = 0; 
      var $checkboxes = $('input[type="checkbox"]:checked'); 
      var $cat = $('#cat'); 

      $checkboxes.each(
       function() { 
        $total += parseInt($(this).val(), 10); 
       } 
      ); 

      $total += parseInt($cat.val()); 

      return $total; 
     } 

     /** 
     * The following function will always update your HTML text 
     */ 
     function updateDOM() 
     { 
      var $total_zwei = $('#total_zwei'); 
      var $total = $('#total'); 

      $total_zwei.text(getTotal() + ' EUR'); 
      $total.text(getTotal() + ' EUR'); 
     } 

     // Update the DOM immediately on page load 
     updateDOM(); 

     // get the required elements you like to track 
     var $checkboxes = $('input[type="checkbox"]'); 
     var $cat = $('#cat'); 

     // On checkbox change event calculate again the DOM 
     $checkboxes.on(
      'change', 
      function() 
      { 
       updateDOM(); 
      } 
     ); 

     // On select option change update again the DOM 
     $cat.on(
      'change', 
      function() 
      { 
       updateDOM(); 
      } 
     ); 
    } 
);

вы также можете увидеть бегущий пример здесь: http://jsfiddle.net/66rwj5xy/

источник

2015-02-25 16:51:56

Hi Merianos, отлично работает. Но быть правдой. Я хочу остаться с jquery. Мне нужно сделать некоторые другие вещи позже и не хочу смешивать много. – MCG

По-прежнему это jQuery, я не использовал другую библиотеку :) Я просто использую некоторые хорошие практики! ;) –

Вы можете создать функцию для получения ваших Eins Zwei и итогов. Thn для общего расчета, вы можете просто вызвать эти функции и добавить возвращенные Eins и цвайте значение вместе:

jQuery(document).ready(function() { 

    jQuery("input[type=checkbox]").click(function() { 
     var total_eins = GetEinsTotal(); 
     jQuery('#total_eins').html(total_eins + ' EUR'); 
    }); 

    jQuery('#cat').on('change', function() { 
     jQuery('#total_zwei').html(GetZweiTotal() + ' EUR'); 
    }); 

    jQuery('#all').on('change', function() { 
     var total_eins = GetEinsTotal(); 
     var total_zwei = GetZweiTotal(); 
     var total = total_eins + parseInt(total_zwei); 
     jQuery('#total').html(total + ' EUR'); 
    }); 
}); 

function GetEinsTotal() { 
    var total_eins = 0; 
    jQuery("input[type=checkbox]:checked").each(function() { 
     total_eins += parseFloat(jQuery(this).val()); 
    }); 

    return total_eins; 
} 

function GetZweiTotal(){ 
    return jQuery('#cat').val(); 
}

Вот демо: http://jsfiddle.net/c75p9Loc/1/

источник

2015-02-25 17:00:39

расчет нескольких элементов ввода с помощью jquery

ответ

Смежные вопросы