Convert to jquery

Danilo, first that I reserve the right to disagree that jQuery is more practical than JavaScript, if we take into account only the modern browsers and excluding the depedence that some frameworks have with jQuery, I only see advantages in not using it.

$(function() {
  var total = $("#Total");
  var produtos = [$("#Product10"), $("#Product20"), $("#Product30")];
  var quantidades = [$("#QuantityProd1"), $("#QuantityProd2"), $("#QuantityProd3")];
  var subTotais = [$("#subtotal1"), $("#subtotal2"), $("#subtotal3")];

  function enableQuantity(produto, quantidade)
  {
    quantidade.prop("disabled", !produto.prop("checked"));
    quantidade.val('');
    calculateTotal();       
  }

  function calculateTotal()
  {
    var soma = 0;
    var subTotal = 0;
    for (var indice = 0; indice < 3; indice++) {
      if (produtos[indice].prop("checked")) {
        subTotal = parseInt(produtos[indice].val()) * parseInt(quantidade[indice].val());
        subTotais[indice].value = subTotal;
        soma += subTotal;
      }
    }
    total.val(soma);
  }

  for (var indice = 0; indice < 3; indice++) {
    enableQuantity(produtos[indice], quantidades[indice]);
  }
});

In the code above, I have already made some improvements that I found pertinent, but it is possible to improve a little more:

$(function() {
  var total = $("#Total");
  var produtos = [$("#Product10"), $("#Product20"), $("#Product30")];
  var quantidades = [$("#QuantityProd1"), $("#QuantityProd2"), $("#QuantityProd3")];
  var subTotais = [$("#subtotal1"), $("#subtotal2"), $("#subtotal3")];
  var subTotal = 0;
  var soma = 0;

  for (var indice = 0; indice < 3; indice++) {
    quantidade.prop("disabled", !produto.prop("checked"));
    quantidade.val('');
    if (produtos[indice].prop("checked")) {
      subTotal = parseInt(produtos[indice].val()) * parseInt(quantidade[indice].val());
      subTotais[indice].value = subTotal;
      soma += subTotal;
    }
  }
  total.val(soma);
});

document.addEventListener("readystatechange", function (event) {
  if (document.readyState == "interactive") {
    var sel = function sel(id) { 
      return document.getElementById(id);
    }
    var total = sel("Total");
    var produtos = [sel("Product10"), sel("Product20"), sel("Product30")];
    var quantidades = [sel("QuantityProd1"), sel("QuantityProd2"), sel("QuantityProd3")];
    var subTotais = [sel("subtotal1"), sel("subtotal2"), sel("subtotal3")];    
    var subTotal = 0;
    var soma = 0;

    for (var indice = 0; indice < 3; indice++) {
      quantidade.disabled = !produto.checked";
      quantidade.selectedIndex = 0;
      if (produtos[indice].checked) {
        subTotal = parseInt(produtos[indice].value) * parseInt(quantidade[indice].value);
        subTotais[indice].value = subTotal;
        soma += subTotal;
      }
    }
    total.value = soma;
  }  
});

The advantage of using framework like JQuery is reuse of functions and cross-browser compatibility.

Note that many confuse Jquery as if it were a language distinct from JavaScript. JQuey is a framework written in JavaScript.

However, this is not the focus of the question, so let's get the answer.

In the script you posted, converting to JQuery functions is simple. Below are examples of what needs to be converted. A list of obvious places where I could identify in a superficial view.

I refrain from rewriting the entire script as this is your job. The most I can provide you with are guidelines on what to do.

getElementById () method

Where you have: document.getElementById , with JQuery would look like $() .

Example:

document.getElementById('id_do_elemento')

Modify to

$('#id_do_elemento')

Note that it is the sharp # character, which tells JQuery that it is the ID attribute.

Domready Event

The window.addEvent('domready', function() { stretch, just switch to

$().ready(function() {

innerHTML method

Where has .innerHTML = 'bla bla'; . switch to

.html('bla bla');

Example: $('#id_do_elemento').html('bla bla');

Checked attribute

if(document.getElementById(products[i]).checked)

It would look like this: if($('#'+products[i]+':checked').val())

Value attribute

Where has .value = 'bla bla'; . switch to

.val('bla bla');

Example: $('#id_do_elemento').val('bla bla');

Disabled attribute

Where has .disabled = false; . switch to

.prop('disabled', false);

Example: $('#id_do_elemento').prop('disabled', false);

SelectedIndex attribute

Where has .selectedIndex = 0; . switch to

.prop('selectedIndex', 0);

Example: $('#id_do_elemento').prop('selectedIndex', 0);