Note that there are some explanatory texts on larger screens.

plurals
  1. POCalculating checkbox totals with jQuery
    primarykey
    data
    text
    <p>I am trying to create a page total based on options selected from checkboxes.</p> <p>here is my HTML markup:</p> <pre><code>&lt;input type="checkbox" id="option1" name="option1" value="&lt;?= $add[0] ?&gt;" /&gt;t1 + &amp;pound;&lt;?= $add[0] ?&gt;&lt;br /&gt; &lt;input type="checkbox" id="option2" name="option2" value="&lt;?= $add[1] ?&gt;" /t2 + &amp;pound;&lt;?= $add[1] ?&gt;&lt;br /&gt; &lt;input type="checkbox" id="option3" name="option3" value="&lt;?= $add[2] ?&gt;" /&gt;t3 + &amp;pound;&lt;?= $add[2] ?&gt;&lt;br /&gt; &lt;input type="checkbox" id="option4" name="option4" value="&lt;?= $add[3] ?&gt;" /&gt;t4 + &amp;pound;&lt;?= $add[3] ?&gt; &lt;br /&gt; </code></pre> <p>This is my JavaScript that doesn't work:</p> <pre><code>var option1 = 0; var option2 = 0; var option3 = 0; var option4 = 0; var op = 0; var extra = document.getElementById('extra'); $(":input").change(function() { option1 = $("input[name=option1]:checked").attr("value"); option2 = $("input[name=option2]:checked").attr("value"); option3 = $("input[name=option3]:checked").attr("value"); option4 = $("input[name=option4]:checked").attr("value"); op = parseInt(option1) + parseInt(option2) + parseInt(option3) + parseInt(option4) ; extra.innerHTML = '&lt;p&gt;&amp;pound;'+op+'&lt;/p&gt;'; }); </code></pre> <p>Have I gone wrong somewhere? I have other totals working, have removed from script so it's easier to read, just this one doesn't work!</p> <p>EDITED:</p> <pre><code>&lt;input id="option1" name="option1" value="20" type="checkbox"&gt;t1 + £20&lt;br&gt; &lt;input id="option2" name="option2" value="20" type="checkbox"&gt;t2 + £20&lt;br&gt; &lt;input id="option3" name="option3" value="20" type="checkbox"&gt;t3 + £20&lt;br&gt; &lt;input id="option4" name="option4" value="20" type="checkbox"&gt;t4 + £20 &lt;br&gt; </code></pre> <p>ADDED RADIO:</p> <pre><code> &lt;input id="delivery" name="delivery" value="0" checked="checked" type="radio"&gt; Standard (72hrs) - no addtional charges&lt;br&gt; &lt;input id="delivery" name="delivery" value="200" type="radio"&gt; 45hrs - £200 per email templates&lt;br&gt; &lt;input id="delivery" name="delivery" value="250" type="radio"&gt; 24hrs - £250 per email templates&lt;br&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload