Develop Reference

How to send values of selected check boxes as a concatenated string in a text input on-click to a action button

Let's assume I have an array of check boxes (not necessarily as a part of a form). In my case 2 rows with 16 check boxes per row.
Each has his unique ID, name and value.
I need An action button to send to a form a concatenated string of selected check boxes and also to another input the number of selected boxes (count of checked) This inputs are part of a form containing and other inputs.
This is my basic functionality diagram:
diagram of1
My question for you is how to achieve this in a stable and safe manner. JS, Jquery, other methods?
Thank you,
Here is my html/Jsquery work:
//Select interval with Shift
$(document).ready(function() {
var $chkboxes = $('.chkbox');
var lastChecked = null;
$chkboxes.click(function(e) {
if (!lastChecked) {
lastChecked = this;
return;
}
if (e.shiftKey) {
var start = $chkboxes.index(this);
var end = $chkboxes.index(lastChecked);
$chkboxes.slice(Math.min(start, end), Math.max(start, end) + 1).prop('checked', lastChecked.checked);
}
lastChecked = this;
});
});
//count checked
var form = document.getElementById('chart');
var checkBoxes = $(form).children('.chkbox');
var count = 0;
var divBoxesChecked = document.getElementById('boxesChecked');
divBoxesChecked.innerHTML = 0;
$(checkBoxes).on('change', function() {
$.each(checkBoxes, function(i) {
if (checkBoxes[i].checked) {
count++;
}
});
var qty = count;
var seld = $('.chkbox:checked').map(function() {
return this.value;
})
.get()
.join(",");
$("#transfercape").on('click', function() {
var pid = 125;
var price = 4;
$('#productprice').val(price);
$('#productID').val(pid);
$('#elements').val(qty);
$('#selectionprice').val(price * qty);
$('#teeth').val(seld);
});
$("#transferbonturi").on('click', function() {
var pid = 155;
var price = 40;
$('#productprice').val(price);
$('#productID').val(pid);
$('#elements').val(qty);
$('#selectionprice').val(price * qty);
$('#teeth').val(seld);
});
console.log(count);
//console.log($('input[class=chkbox]:checked').val(","));
divBoxesChecked.innerHTML = count + " elemente selectate ";
console.log(seld);
count = 0;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chart">
<h1>Chart</h1>
<input type="checkbox" class="chkbox" id="maxila18" name="maxila18" value="18">
<label for="maxila1"> 18</label>
<input type="checkbox" class="chkbox" id="maxila17" name="maxila17" value="17">
<label for="maxila17">17</label>
<input type="checkbox" class="chkbox" id="maxila16" name="maxila16" value="16">
<label for="maxila16">16</label>
<input type="checkbox" class="chkbox" id="maxila15" name="maxila15" value="15">
<label for="maxila15"> 15</label>
<input type="checkbox" class="chkbox" id="maxila14" name="maxila14" value="14">
<label for="maxila14"> 14</label>
<input type="checkbox" class="chkbox" id="maxila13" name="maxila13" value="13">
<label for="maxila13"> 13</label>
<input type="checkbox" class="chkbox" id="maxila12" name="maxila12" value="12">
<label for="maxila12"> 12</label>
<input type="checkbox" class="chkbox" id="maxila11" name="maxila11" value="11">
<label for="maxila11"> 11</label>
<input type="checkbox" class="chkbox" id="maxila21" name="maxila21" value="21">
<label for="maxila21"> 21</label>
<input type="checkbox" class="chkbox" id="maxila22" name="maxila22" value="22">
<label for="maxila22"> 22</label>
<input type="checkbox" class="chkbox" id="maxila23" name="maxila23" value="23">
<label for="maxila23"> 23</label>
<input type="checkbox" class="chkbox" id="maxila24" name="maxila24" value="24">
<label for="maxila24"> 24</label>
<input type="checkbox" class="chkbox" id="maxila25" name="maxila25" value="25">
<label for="maxila25"> 25</label>
<input type="checkbox" class="chkbox" id="maxila26" name="maxila26" value="26">
<label for="maxila26"> 26</label>
<input type="checkbox" class="chkbox" id="maxila27" name="maxila27" value="27">
<label for="maxila27"> 27</label>
<input type="checkbox" class="chkbox" id="maxila28" name="maxila28" value="28">
<label for="maxila28"> 28</label>
<br>
<input type="checkbox" class="chkbox" id="mandible38" name="mandible38" value="38">
<label for="mandible3"> 38</label>
<input type="checkbox" class="chkbox" id="mandible37" name="mandible37" value="37">
<label for="mandible37">37</label>
<input type="checkbox" class="chkbox" id="mandible36" name="mandible36" value="36">
<label for="mandible36">36</label>
<input type="checkbox" class="chkbox" id="mandible35" name="mandible35" value="35">
<label for="mandible35"> 35</label>
<input type="checkbox" class="chkbox" id="mandible34" name="mandible34" value="34">
<label for="mandible34"> 34</label>
<input type="checkbox" class="chkbox" id="mandible33" name="mandible33" value="33">
<label for="mandible33"> 33</label>
<input type="checkbox" class="chkbox" id="mandible32" name="mandible32" value="32">
<label for="mandible32"> 32</label>
<input type="checkbox" class="chkbox" id="mandible31" name="mandible31" value="31">
<label for="mandible31"> 31</label>
<input type="checkbox" class="chkbox" id="mandible41" name="mandible41" value="41">
<label for="mandible43"> 41</label>
<input type="checkbox" class="chkbox" id="mandible42" name="mandible42" value="42">
<label for="mandible42"> 42</label>
<input type="checkbox" class="chkbox" id="mandible43" name="mandible43" value="43">
<label for="mandible43"> 43</label>
<input type="checkbox" class="chkbox" id="mandible44" name="mandible44" value="44">
<label for="mandible44"> 44</label>
<input type="checkbox" class="chkbox" id="mandible45" name="mandible45" value="45">
<label for="mandible45"> 45</label>
<input type="checkbox" class="chkbox" id="mandible46" name="mandible46" value="46">
<label for="mandible46"> 46</label>
<input type="checkbox" class="chkbox" id="mandible47" name="mandible47" value="47">
<label for="mandible47"> 47</label>
<input type="checkbox" class="chkbox" id="mandible48" name="mandible48" value="48">
<label for="mandible48"> 48</label>
<br>
</div>
<div>
<h3> numar elemente selectate</h3>
<div id="boxesChecked"> </div>
</div>
<input type="button" value="ADD CAPE" id="transfercape">!Cape CrCo(4euro) </input>
<input type="button" value="ADD Bonturi" id="transferbonturi">!Bonturi(40euro) </input>
<div id="container1">
<form>
<input type="text" / id="elements" placeholder="elements">
<input type="text" / id="productID" placeholder="productID">
<input type="text" / id="productprice" placeholder="productprice">
<input type="text" / id="selectionprice" placeholder="selectionprice">
<input type="text" / id="teeth" name="teeth " placeholder="teeth" value="">
</form>
</div>
This solved practically main problem, still I can't figure how to replace join separator between consecutive selected boxes from comma to minus.
String returned by .map() function need to conditionally change separator for consecutively checked boxes.
Example:
Checked: 18 14 13 12 24
Now the result is: 18,14,13,12,24
but I need to be: 18,14-13-12,24
Please help!

Javascript open and hide radio

A little problem that anyone but me can solve with ignorance of JS.
I open various divs after clicking on the payment method, according to the frequency of payments. I also open a div with text inputs.
The problem is that the used JS is applied to everything. So if by input (radio) unpack the div, another independent input (radio) closes it.
Also, if I unpack a div with other radio inputs by input, clicking on any of the divs will close the div again.
Here fiddle - jsfiddle.net/72jzy8gb
$(document).ready(function() {
$('input[type="radio"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".ukaz").not(targetBox).hide();
$(targetBox).show();
});
});
.ukaz {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form-daruj" action="https://www.darujme.cz/darovat/1320" id="myForm" method="get">
<table class="daruj-form">
<tr>
<td colspan="2" style="text-align:center;font-size:25px;">
<b style="color:#dd4814;">Částka dobrovolného příspěvku</b><br />
</td>
</tr>
<tr>
<td style="text-align:-webkit-right;"><div style="width:147px;" id="castka">
<input name="amount" type="number" style="width: 100px;" value="100"> <span style="display:inline;">Kč</span></div><br /><input name="currency" type="hidden" value="CZK">
<input name="locale" type="hidden" value="cs"></td>
<td style="vertical-align:top;text-align:-webkit-left;"><div class="castky" style="
margin-top: 6px;"><input type="radio" name="frequency" value="once"><div id="jednorazove" style="font-size:13px;color:black;font-weight:bold;display: inline;padding-left: 5px;vertical-align: super;">Jednorázově</div><br>
<input type="radio" name="frequency" value="monthly"> <div id="mesicne" style="padding-left:2px;font-size:13px;color:black;font-weight:bold;display: inline;vertical-align: super;"> Měsíčně</div></div></td>
</tr>
<tr>
<td style="width:50%;">
<input name="firstName" type="text" placeholder="Jméno"><br>
<input name="lastName" type="text" placeholder="Příjmení"><br>
<input name="email" type="email" placeholder="Váš email"><br>
<input name="phone" type="number" placeholder="Telefonní číslo"><br>
<br>
<b>Požadujete potvrzení o daru?</b><br>
<input type="radio" name="wantDonationCertificate" value="1" nazev="adresa"> Ano<br>
<input type="radio" name="wantDonationCertificate" value="0" checked=""> Ne<br>
</td>
<td><div class="1 ukaz">
<input name="street" type="text" placeholder="Ulice a číslo popisné"><br>
<input name="city" type="text" placeholder="Obec/město"><br>
<input name="postcode" type="text" placeholder="PSČ"><br>
</div>
<br>
<div class="once ukaz">
<b>Výběr platby:</b><br>
<input type="radio" name="paymentMethod" value="proxypay_charge"> Platba kartou<br>
<input type="radio" name="paymentMethod" value="funds_transfer"> Platba převodem<br>
<input type="radio" name="paymentMethod" value="payu_transfer"> Online platba PayU
</div>
<div class="monthly ukaz">
<b>Výběr platby:</b><br>
<input type="radio" name="paymentMethod" value="proxypay_charge"> Platba kartou<br>
<input type="radio" name="paymentMethod" value="funds_transfer"> Platba převodem
</div>
<b>Chcete zasílat aktuality na email?</b><br>
<input type="radio" name="custom[souhlas_se_zasilanim_novinek_svobody_zvirat_a_se_zpracovanim_osobnich_udaju_pro_tyto_ucely]" value="1" checked=""> Ano<br>
<input type="radio" name="custom[souhlas_se_zasilanim_novinek_svobody_zvirat_a_se_zpracovanim_osobnich_udaju_pro_tyto_ucely]" value="0"> Ne<br>
<input type="submit" value="Odeslat">
</td>
</tr>
</table>
</form>
This is undesirable behavior.
Thanks for help!

You should use an indicator that points on a specific element but not a group of elements.
I used a name of input instead of a type here:
$(document).ready(function() {
$('input[name="wantDonationCertificate"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".ukaz").not(targetBox).hide();
$(targetBox).show();
});
});

Change input text on radio button selection different forms

I am trying to make the input text change when pressing on radio button
the form it self have 5 option with multiple radio buttons and input text
the input text that i am trying to change is in different form since also when changing the input text in the main form it should change it on the other one
i get this for now
$(document).ready(function () {
$("input[type=radio]").click(function () {
$(this).closest('form').find("input[type=text]").val(this.value);
});
});
but this change the input text in the current form
how can i make to change the second form input text
main form
<form action="cart.php" name="cart" id="cart" target="cart"
method="post" onsubmit="return cart();">
<input name="selector0" type="hidden" value="A">
<input name="selector0hyphen" type="hidden" value="-">
<div class="selector">
<div class="selector">
ccc
</div>
<p>
<label>
<input name="selector1" type="radio" id="selector1_0" value="J" checked="checked">
TYPE : p </label>
<br>
<label>
<input type="radio" name="selector1" value="K" id="selector1_1">
TYPE : l </label>
</p>
<div class="selector">j</div>
<p>
<label>
<input name="selector2" type="radio" id="selector2_0" value="G" checked="checked">
aaa</label>
<br>
<label>
<input type="radio" name="selector2" value="U" id="selector2_1">
u</label>
</p>
<input name="selector2hyphen" type="hidden" value="-">
<div class="selector">bbb</div>
<p>
<label><input name="selector3" type="text" id="selector3" value="000" size="5" maxlength="3">
inches. Please use 3 digit</label></p>
<input name="selector3hyphen" type="hidden" value="-">
<div class="selector"> wd</div>
<p>
<label>
<input name="selector4" type="radio" id="selector4_0" value="S" checked="checked">
24</label>
<br>
<label>
<input type="radio" name="selector4" value="X" id="selector4_1">
22</label>
<br>
<label>
<input type="radio" name="selector4" value="F" id="selector4_2">
21</label>
<br>
<label>
<input type="radio" name="selector4" value="T" id="selector4_3">
211</label>
</p>
<div class="selector">t Type</div>
<p>
<label>
<input name="selector5" type="radio" id="selector5_0" value="1" checked="checked">
33</label>
<br>
<label>
<input type="radio" name="selector5" value="2" id="selector5_1">
3"</label>
<br>
<label>
<input type="radio" name="selector5" value="3" id="selector5_2">
st m</label>
<br>
<label>
<input type="radio" name="selector5" value="4" id="selector5_3">
st</label>
<br>
<label>
<input type="radio" name="selector5" value="5" id="selector5_4">
mm</label>
<br>
<label>
<input type="radio" name="selector5" value="6" id="selector5_5">
mmmf</label>
</p>
<div class="selector">acc</div>
<p>
<label>
<input name="selector6" type="radio" id="selector6_0" value="A" checked="checked">
None</label>
<br>
<label>
<input type="radio" name="selector6" value="B" id="selector6_1">
b</label>
<br>
<label>
<input type="radio" name="selector6" value="C" id="selector6_2">
bb</label>
<br>
<br>
</p>
<p>
<input name="" type="image" value="submit" src="/images/raq.png" style="margin-left:18px;">
</p>
</div>
second form where input should change
<tbody>
<tr>
<th>Model </th>
<td style="width:100%;">
A<input name="selector1" type="text" value="_" maxlength="3">
<input name="selector2" type="text" value="_" maxlength="3">
<input name="selector3" type="text" value="000" maxlength="3">
<input name="selector4" type="text" value="_" maxlength="3">
<input name="selector5" type="text" value="_" maxlength="3">
<input name="selector6" type="text" value="_" maxlength="3">
</td></tr>
</tbody>
so for now if i press on radio button it change the input in the same form
i need to change the input text on the second form
for example i press on type p it change the first input text in the second form
thanks

Problem in your code:
find("input[type=text]").val(this.value); will give you all the input type=text, and update all of them with this.value, what you really want is to target the specific element, so should be something like .find("input[name=" + this.name + "][type=text]")
Solution:
Use .find("input[name=" + this.name + "][type=text]") to find the last element with name="xxxx" and type=text, this will return only one result since the combination is unique
The idea is to target the single input element you want to update, also you should clean up your code, attribute orders etc, remove id if you are not using it.
UPDATE: change input update radio button.
.find("input[type=radio][name=" + this.name + "][value=" + this.value + "]")
when update your text input, you can target the input where type=radio with same name and same value then use .prop("checked", true) to check it.
$(document).ready(function() {
$("input[type=radio]").click(function() {
$(this).closest('body').find("input[name=" + this.name + "][type=text]").val(this.value);
});
$("input[type=text]").on('input', function() {
$(this).closest('body').find("input[type=radio][name=" + this.name + "][value=" + this.value + "]").prop("checked", true);
});
//init
$("input[type=radio]:checked").click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
main form
<div class="selector">
<div class="selector">
ccc
</div>
<p>
<label>
<input name="selector1" type="radio" id="selector1_0" value="J" checked="checked">
TYPE : p </label>
<br>
<label>
<input type="radio" name="selector1" value="K" id="selector1_1">
TYPE : l </label>
</p>
<div class="selector">j</div>
<p>
<label>
<input name="selector2" type="radio" id="selector2_0" value="G" checked="checked">
aaa</label>
<br>
<label>
<input type="radio" name="selector2" value="U" id="selector2_1">
u</label>
</p>
<input name="selector2hyphen" type="hidden" value="-">
<div class="selector">bbb</div>
<p>
<label><input name="selector3" type="text" id="selector3" value="000" size="5" maxlength="3">
inches. Please use 3 digit</label></p>
<input name="selector3hyphen" type="hidden" value="-">
<div class="selector-column-boxhead"> wd</div>
<p>
<label>
<input name="selector4" type="radio" id="selector4_0" value="S" checked="checked">
24</label>
<br>
<label>
<input type="radio" name="selector4" value="X" id="selector4_1">
22</label>
<br>
<label>
<input type="radio" name="selector4" value="F" id="selector4_2">
21</label>
<br>
<label>
<input type="radio" name="selector4" value="T" id="selector4_3">
211</label>
</p>
<div class="selector-column-boxhead">t Type</div>
<p>
<label>
<input name="selector5" type="radio" id="selector5_0" value="1" checked="checked">
33</label>
<br>
<label>
<input type="radio" name="selector5" value="2" id="selector5_1">
3"</label>
<br>
<label>
<input type="radio" name="selector5" value="3" id="selector5_2">
st m</label>
<br>
<label>
<input type="radio" name="selector5" value="4" id="selector5_3">
st</label>
<br>
<label>
<input type="radio" name="selector5" value="5" id="selector5_4">
mm</label>
<br>
<label>
<input type="radio" name="selector5" value="6" id="selector5_5">
mmmf</label>
</p>
<div class="selector-column-boxhead">acc</div>
<p>
<label>
<input name="selector6" type="radio" id="selector6_0" value="A" checked="checked">
None</label>
<br>
<label>
<input type="radio" name="selector6" value="B" id="selector6_1">
b</label>
<br>
<label>
<input type="radio" name="selector6" value="C" id="selector6_2">
bb</label>
<br>
<br>
</p>
<p>
<input name="" type="image" value="submit" src="/images/raq.png" style="margin-left:18px;">
</p>
</div>
second form where input should change
<tbody>
<tr>
<th>Model </th>
<td style="width:100%;">
A<input name="selector1" type="text" value="_" maxlength="3">
<input name="selector2" type="text" value="_" maxlength="3">
<input name="selector3" type="text" value="000" maxlength="3">
<input name="selector4" type="text" value="_" maxlength="3">
<input name="selector5" type="text" value="_" maxlength="3">
<input name="selector6" type="text" value="_" maxlength="3">
</td>
</tr>
</tbody>

The form your changing the input is the first form,
select the next form by adding the next method after ( closest( form) )
Don't Forget form tags plus they have to be next to one another.
$(document).ready(function () {
$("input[type=radio]").click(function () {
$(this).closest('form').next() .find("input[type=text]").val(this.value);
});
});

$(this).closest() is used to find the closest parent element. It would only select the element that is the parent of $(this) element.
You should give the text inputs unique IDs so that they can be easily identified.
Change this-
<input name="selector1" type="text" value="_" maxlength="3">
To this-
<input name="selector1" id="selector1" type="text" value="_" maxlength="3">
And then in jquery,
$("input[type=radio]").click(function () {
$("#selector1").val(this.value);
});

Try this code
Add a common class to every radio button
$(document).ready(function() {
$('.class_name_of_radio').change(function() {
$("input[type=text][name="+this.name+"]").val(this.value);
});
});

Create a onchange function for all the radio button on all the forms. Pass the value of the radio button on the function and get the value from the function.
Eg:
Function myChange(myRadioVal)
{
$("#inputTextBoxId").val(myRadioVal);
//code here
}

Calculate total on checkbox checked

HTML
<div id="catlist">
<input type="checkbox" id="cat_1" value="cat_1" price="1.5" /><label for="cat_1">cat_1</label><br/>
<input type="checkbox" id="cat_2" value="cat_2" price="2" /><label for="cat_2">cat_2</label><br/>
<input type="checkbox" id="cat_3" value="cat_3" price="3.5" /><label for="cat_3">cat_3</label><br/>
<input type="checkbox" id="cat_4" value="cat_4" price="4" /><label for="cat_4">cat_4</label><br/>
<input type="checkbox" id="cat_5" value="cat_5" price="5" /><label for="cat_5">cat_5</label><br/>
<input type="checkbox" id="cat_6" value="cat_6" price="6.5" /><label for="cat_6">cat_6</label><br/>
<input type="checkbox" id="cat_7" value="cat_7" price="7" /><label for="cat_7">cat_7</label><br/>
<input type="checkbox" id="cat_8" value="cat_8" price="8" /><label for="cat_8">cat_8</label><br/>
<input type="checkbox" id="cat_9" value="cat_9" price="9.5" /><label for="cat_9">cat_9</label>
</div>
<input type="text" id="total" value="0" />
Javascript
function calcAndShowTotal(){
var total = 0;
$('#catlist :checkbox[checked]').each(function(){
total =+ parseFloat($(this).attr('price')) || 0;
});
$('#total').val(total);
}
$('#pricelist :checkbox').click(function(){
calcAndShowTotal();
});
calcAndShowTotal();
I am getting particular value. WHY? I tried sum of total, i tried jquery but no success..

Use $('#catlist :checkbox:checked') selector to select checked check-boxes
[] is used as attribute selector and it could be used as '[type="checkbox"]' but it will not filter checked check-boxes
+ operator is not needed before parseFloat, it has to be total =+
Instead of calling handler, just invoke change handler using .change()
function calcAndShowTotal() {
var total = 0;
$('#catlist :checkbox:checked').each(function() {
total += parseFloat($(this).attr('price')) || 0;
});
$('#total').val(total);
}
$('#catlist :checkbox').change(calcAndShowTotal).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="catlist">
<input type="checkbox" id="cat_1" value="cat_1" price="1.5" />
<label for="cat_1">cat_1</label>
<br/>
<input type="checkbox" id="cat_2" value="cat_2" price="2" />
<label for="cat_2">cat_2</label>
<br/>
<input type="checkbox" id="cat_3" value="cat_3" price="3.5" />
<label for="cat_3">cat_3</label>
<br/>
<input type="checkbox" id="cat_4" value="cat_4" price="4" />
<label for="cat_4">cat_4</label>
<br/>
<input type="checkbox" id="cat_5" value="cat_5" price="5" />
<label for="cat_5">cat_5</label>
<br/>
<input type="checkbox" id="cat_6" value="cat_6" price="6.5" />
<label for="cat_6">cat_6</label>
<br/>
<input type="checkbox" id="cat_7" value="cat_7" price="7" />
<label for="cat_7">cat_7</label>
<br/>
<input type="checkbox" id="cat_8" value="cat_8" price="8" />
<label for="cat_8">cat_8</label>
<br/>
<input type="checkbox" id="cat_9" value="cat_9" price="9.5" />
<label for="cat_9">cat_9</label>
</div>
<input type="text" id="total" value="0" />
Using Array#reduce
function calcAndShowTotal() {
var total = [].reduce.call($('#catlist :checkbox:checked'), function(a, b) {
return a + +$(b).attr('price') || 0;
}, 0);
$('#total').val(total);
}
$('#catlist :checkbox').change(calcAndShowTotal).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="catlist">
<input type="checkbox" id="cat_1" value="cat_1" price="1.5" />
<label for="cat_1">cat_1</label>
<br/>
<input type="checkbox" id="cat_2" value="cat_2" price="2" />
<label for="cat_2">cat_2</label>
<br/>
<input type="checkbox" id="cat_3" value="cat_3" price="3.5" />
<label for="cat_3">cat_3</label>
<br/>
<input type="checkbox" id="cat_4" value="cat_4" price="4" />
<label for="cat_4">cat_4</label>
<br/>
<input type="checkbox" id="cat_5" value="cat_5" price="5" />
<label for="cat_5">cat_5</label>
<br/>
<input type="checkbox" id="cat_6" value="cat_6" price="6.5" />
<label for="cat_6">cat_6</label>
<br/>
<input type="checkbox" id="cat_7" value="cat_7" price="7" />
<label for="cat_7">cat_7</label>
<br/>
<input type="checkbox" id="cat_8" value="cat_8" price="8" />
<label for="cat_8">cat_8</label>
<br/>
<input type="checkbox" id="cat_9" value="cat_9" price="9.5" />
<label for="cat_9">cat_9</label>
</div>
<input type="text" id="total" value="0" />

Instead of looping you can use change which will respond to and change event on the checkbox. Also you need add or subtract value like this += for addition on -= for subtraction
var _total = 0;
$('input[type="checkbox"]').change(function() {
if($(this).is(':checked')){
_total += parseFloat($(this).attr('price')) || 0;
}
else{
_total -= parseFloat($(this).attr('price')) || 0;
}
$('#total').val(_total);
})
JSFIDDLE

$('input:checkbox').change(function(){
var totalprice=0;
$('input:checkbox:checked').each(function(){
totalprice+= parseFloat($(this).attr('price'));
});
$('#total').val(totalprice)
});

Javascript/HTML - Passing function return variable into a hidden input value

I've read heaps of posts about this and I'm still having issues with passing the return variable from my function to a hidden input value. The function is checking all radio buttons on the page (12 of them) and finding the one which is selected. It is either passing NULL or the javascript to screen.php. I have tested the checked() function and it works (used alert() to show the value). I've read heaps of posts on passing values to hidden inputs and none of those solutions have worked for me.
If you need to see more code, I can post it on pastebin.
<script language="text/javascript">
function checked()
{
var inputs = document.getElementsByClassName('radio');
var valueSelected;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) valueSelected = inputs[i].value;
}
return valueSelected;
}
</script>
</head>
<body>
<div id="header-wrapper">
<div id="header">
<div id="logo">
<h1>KSM</h1>
</div>
</div>
<div id="buttons">
<ul>
<li>
<form id="form_ready" method="post" action="../backend/screen.php">
<input type="hidden" name="screenid" value="1" />
<input type="hidden" name="status" value="READY" />
<input type="hidden" name="pickupid" id="pickupid" value="" />
<input type="submit" class="submit" name="READY" onclick="document.getElementById('pickupid').value = checked();">
</form>
<div id="search">
<ul id="nav">
<li class="tab1">Ordered</li>
</ul>
</div>
<div id="content">
<div id="container">
<table>
<tr>
<td>
<input type="radio" class="radio" name="pickup" id="1" value="001" />
<label for="1"> <span>001</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="2" value="002" />
<label for="2"> <span>002</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="3" value="003" />
<label for="3"> <span>003</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="4" value="004" />
<label for="4"> <span>004</span> </label>
</td>
</tr>
<tr>
<td>
<input type="radio" class="radio" name="pickup" id="5" value="005" />
<label for="5"> <span>005</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="6" value="006" />
<label for="6"> <span>006</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="7" value="007" />
<label for="7"> <span>007</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="8" value="008" />
<label for="8"> <span>008</span> </label>
</td>
</tr>
<tr>
<td>
<input type="radio" class="radio" name="pickup" id="9" value="009" />
<label for="9"> <span>009</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="10" value="010" />
<label for="10"> <span>010</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="11" value="011" />
<label for="11"> <span>011</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="12" value="012" />
<label for="12"> <span>012</span> </label>
</td>
</tr>
</table>
</div>
</div>
</body>

What's going on with the current code you have is you're submitting the form before the JS has time to execute your function and put the data into the hidden input. I wouldn't really suggest doing it in the way you're doing now, but here's a quick fix.
In your HTML change the form to this
<form id="form_ready" method="post" action="../backend/screen.php" onsubmit="return checked()">
And in your JS change your checked function to:
function checked(){
var inputs = document.getElementsByClassName('radio');
var valueSelected;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) valueSelected = inputs[i].value;
}
return (document.getElementById('pickupid').value = valueSelected);
}
Also, get rid of the onclick on that submit button.