[jquery] calculation e checkbox

**Scream** · 12-05-2012, 08:06

rieccomi di nuovo qui con calculation.
spiego in 2 parole. ho 4 checkbox che vorrei sommare ad un valore già calcolato in precedenza tramite php

lato client mi arriva questo

codice:

<div id="totale">200.50</div>
<h3>Opzioni</h3>
<input name="checkbox[1]" class="chkOptions" value="10.00" type="checkbox" id="1">
<input name="checkbox[2]" class="chkOptions" value="15.00" type="checkbox" id="2">
<input name="checkbox[3]" class="chkOptions" value="20.00" type="checkbox" id="3">
<input name="checkbox[4]" class="chkOptions" value="25.00" type="checkbox" id="4">

L'utente premendo su una checkbox dovrebbe vedere il valore 200.50 incrementarsi del rispettivo valore da sommare

Ho inserito jquery calculation con questo semplice script

codice:

$("input[id='1'],input[id='2'],input[id='3'],input[id='4']").sum("keyup", "#totale");

Carico la pagina e anziché vedere quanto in alto, il contenuto di #totale è 70 (senza decimali o altro)
Anche agendo sui singoli checkbox il valore di #totale non cambia. Per ora ho semplicemente commentato la riga con l'istruzione "sum", ma vorrei ovviamente farlo funzionare, possibilmente con l'uso della virgola al posto del punto nel div #totale

**cavicchiandrea** · 12-05-2012, 11:01

il keyup nelle checkbox non mi sembra che esista prova a sostituirlo con checked (sempre che sia supportato da calculation/sum)

**Scream** · 13-05-2012, 09:45

già provato, ma senza esito.

**Scream** · 13-05-2012, 11:18

ho provato questo codice che con calculation non c'entra nulla.

codice:

    jQuery(".chkOptions").click(
      function () {
        var ntot = 0;
        jQuery(".chkOptions:checked").each(function () {
          ntot += parseInt(jQuery(this).val());
        });
        jQuery("#txtSavingsTot").val(ntot);
      })
      .change();

non funziona, tuttavia credo che sia dovuto a quanto più sopra...

codice:

	  /* see if anything is previously checked and reflect that in the view*/
	  jQuery(".checklist input:checked").parent().addClass("selected");
	
	  /* handle the user selections */
	  jQuery(".checklist .checkbox-select").click(
		  function(event) {
			  event.preventDefault();
			  jQuery(this).parent().addClass("selected");
			  jQuery(this).parent().find(":checkbox").attr("checked","checked");
			
		  }
	  );
	
	  jQuery(".checklist .checkbox-deselect").click(
		  function(event) {
			  event.preventDefault();
			  jQuery(this).parent().removeClass("selected");
			  jQuery(this).parent().find(":checkbox").removeAttr("checked");
		  }
	  );

Questi i 2 link che mostrano rispettivamente la prima porzione di codice http://skfox.com/jqExamples/CheckBoxValues.html e la seconda che non è altro che uno script per visualizzare i checkbox in modo più carino http://aaronweyenberg.com/90/pretty-...es-with-jquery

**carlomarx** · 13-05-2012, 12:51

Senza le lungaggini di jQuery....

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio</title>
<script type="text/javascript">
function chbSum () {
	var oDisplay = document.querySelector("#totale");
	oDisplay.innerHTML = parseFloat(oDisplay.innerHTML) + (this.checked ? parseFloat(this.value) : - parseFloat(this.value));
}

window.onload = function () {
	Array.prototype.forEach.call(document.querySelectorAll(".chkOptions"), function (oChB) {
		if (oChB.checked) { this.innerHTML = parseFloat(this.innerHTML) + parseFloat(oChB.value); }
		oChB.onchange = chbSum;
	}, document.querySelector("#totale"));
};
</script>
</head>
<body>
<form name="tuoForm">
	<div id="totale">200.50</div>
	<h3>Opzioni</h3>
	<input name="checkbox[1]" class="chkOptions" value="10.00" type="checkbox" id="1">
	<input name="checkbox[2]" class="chkOptions" value="15.00" type="checkbox" id="2">
	<input name="checkbox[3]" class="chkOptions" value="20.00" type="checkbox" id="3">
	<input name="checkbox[4]" class="chkOptions" value="25.00" type="checkbox" id="4">
</form>
</body>
</html>

P.S. Ho presupposto che questo comportamento debba essere valido per tutte le checkbox con class="chkOptions". Gestiscitelo di conseguenza...

**Scream** · 14-05-2012, 12:33

Non funziona.
Non so se è un problema legato allo stile applicato alle checkbox tramite jquery e css, ma nessun suggerimento funziona.

Discussione: [jquery] calculation e checkbox

Strumenti discussione

Ricerca discussione

Visualizza

[jquery] calculation e checkbox

Permessi di invio