Develop Reference

JavaScript - have multiple checkboxes but only able to select one while updating a dollar value

Here is what I'm having trouble doing.
I want to be able to display 4 checkboxes next to each other while only being able to select one at a time. While one is checked, I want that value to be added to a total sum that comes from another section of checkboxes.
I have been fighting with this all night (6 hours) and have gone forward and backwards in my attempts.
HTML
Checkboxes test 1:
<input type="checkbox" class="sum checkbox" value="1" />
<input type="checkbox" class="sum checkbox" value="2" />
<input type="checkbox" class="sum checkbox" value="3" />
<input type="checkbox" class="sum checkbox" value="4" />
<input type="checkbox" class="sum checkbox" value="5" />
<section id="extra-features">
<label class="header">How often?</label><br><br>
<div class="span3">
<label class="checkbox" for="Checkbox1">
<input value="50" type="checkbox" class="sum checkbox" data-toggle="checkbox"> Daily
</label>
<label class="checkbox">
<input value="50" type="checkbox" class="sum checkbox" data-toggle="checkbox"> 3 times a week
</label>
<label class="checkbox">
<input value="50" type="checkbox" class="sum checkbox" data-toggle="checkbox"> Once a week
</label>
<label class="checkbox">
<input value="50" type="checkbox" class="sum checkbox" data-toggle="checkbox"> Custom
</label>
</div>
</section>
<div class="card-charge-info">
Total per mo. $<span id="payment-total">0</span>
</div>
In the above HTML code that I have mashed together, I have a section of checkboxes that uses (posted after this block) a JS script in order to uncheck a box if another one is checked. Those boxes also have values that are added to a 'sum' BUT the issue that occurs is this:
When clicking on a box that is already checked, the value is subtracted from the overall sum. If I click on another box, and the first box is unchecked by the JS script, the value is not subtracted from the overall sum but the box itself is unchecked.
The code under the 'checkbox test' is another block of checkboxes that I have not been able to apply the unchecking idea too. The same issue with sum not being subtracted would surely be prevalent anyway.
JS
$('.checkbox').click(function() {
$(this).siblings('input:checkbox').prop('checked', false);
});
var inputs = document.getElementsByClassName('sum'),
total = document.getElementById('payment-total');
for (var i=0; i < inputs.length; i++) {
inputs[i].onchange = function() {
var add = this.value * (this.checked ? 1 : -1);
total.innerHTML = parseFloat(total.innerHTML) + add
}
}
Updated JSFiddle

What you really want is a radio button, which will allow only one of a group to be selected. Once you have done this, assign a value to the radiobutton which will be returned when you submit the form. Then use this value however you wish.

Two groups of checkboxes, if first one is checked second can not be

I have two "groups" of checkboxes (although the first group only contains one checkbox), but if user checks the checkbox from the first group I want to restrict the ability of checking the checkboxes from second group...
<div>
<h3>First group</h3>
<label>
<input type="checkbox" value="1" name="group1" />If checked, checks all the checkboxes in 2nd group</label>
<label>
</div>
<div>
<h3>Second Group</h3>
<label>
<input type="checkbox" class="radio" value="1" name="group2" />1</label>
<label>
<input type="checkbox" class="radio" value="1" name="group2" />1</label>
</div>

<div>
<h3>First group</h3>
<label>
<input type="checkbox" value="1" name="group1" id='Grp1'/>If checked, checks all the checkboxes in 2nd group</label>
<label>
</div>
<div>
<h3>Second Group</h3>
<label>
<input type="checkbox" class="radio Grp2" value="1" name="group2" />1</label>
<label>
<input type="checkbox" class="radio Grp2" value="1" name="group2" />1</label>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$('#Grp1').change(function() {
if($(this).is(":checked"))
{
$('.Grp2').prop('disabled', true);
}
else
{
$('.Grp2').prop('disabled', false);
}
});
</script>

I've used a simple jQuery script to solve it.
initially it didn't exactly do what I wanted it to do, but I've managed to work around it with php as I had to make sure that if someone checked the checkbox from the second group that it didn't go to the database.
$('#checkbox1').click(function() {
if( $(this).is(':checked')) {
$("#checkbox2").hide();
} else {
$("#checksbox2").show();
}
});
As for php I simply used a ternary operator to make sure that if checkbox with id checkbox1 is checked then I want to ignore the rest of the checkboxes...
$smnrs = !empty($_POST['all']) ? explode(';', $_POST['all']) : $_POST['seminars'];
in this case $_POST['all'] refers to the first checkbox that if clicked it hides the div holding the other checkboxes.

Check-boxes with Radio-buttons quality

I need check-boxes list that has one quality of radio-buttons:
That you can check only one of them.
I don't want to use radio-buttons, becouse I need other qualities of check-boxes, like that you can un-check it by additional click.
Is there any simple way to do it?
I can use javascript, including knockout and jquery libraries.

DEMO
$(function() {
$(':checkbox').on('change',function() {
$(':checkbox[name=' + this.name + ']:checked').not(this).prop('checked',false);
});
});

HTML:
<fieldset>
<legend>Group1</legend>
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
</fieldset>
<fieldset>
<legend>Group2</legend>
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
</fieldset>
Checkbox Group exactly like a radio button group
jsfiddle:
Checkbox Group
Javascript:
$("input:checkbox").click(function(){
var group = "input:checkbox[name='"+$(this).attr("name")+"']";
$(group).attr("checked",false);
$(this).attr("checked",true);
});
Checkbox Group you can remove all checked.
jsfiddle:
Checkbox Group(can remove all checked)
Javascript:
$("input:checkbox").change(function(){
var group = "input:checkbox[name='"+$(this).attr("name")+"']";
$(group).not(this).prop("checked",false);
$(this).prop("checked",!this.checked);
});

JS output all checked input fields values before form submit

I have an order form with several checkbox input fields. I want to show the user the selection made before submitting the form. The js script shown bellow works as intended if the user checks a box the value of that box is showed in the paragraph. The problem is that every additional checked checkbox overrides the previous shown result.
How do I change the script to output all the checked checkbox?
This is the PHP form:
<input type="checkbox" onchange="toggleCheckbox(this)" value="1" name="1">
<input type="checkbox" onchange="toggleCheckbox(this)" value="2" name="2">
<input type="checkbox" onchange="toggleCheckbox(this)" value="3" name="3">
<input type="checkbox" onchange="toggleCheckbox(this)" value="4" name="4">
<input type="checkbox" onchange="toggleCheckbox(this)" value="5" name="5">
<input type="checkbox" onchange="toggleCheckbox(this)" value="6" name="6">
<input type="checkbox" onchange="toggleCheckbox(this)" value="7" name="7">
The JavaScript i use:
<script type="text/javascript">
function toggleCheckbox(element){
if (element.checked){
document.getElementById("test").innerHTML = element.value;
}
else document.getElementById("test").innerHTML = "";
}
</script>
The HTML field:
<p id="test"></p>

+= not =
function toggleCheckbox(element){
if (element.checked)
document.getElementById("test").innerHTML += " " + element.value;
else
document.getElementById("test").innerHTML =
document.getElementById("test").innerHTML.replace(element.value, "");
}

Enabling and disabling checkboxes with javascript

I have been trying to figure out the solution to my problem for a few hours now. I'm still fairly new to Javascript, so please forgive me if I sound stupid. Sadly I don't know jQuery and I'm starting to think that it's inhibiting me to come up with a solution.
What I am trying to do is have a check box that enables disabled radio buttons. If that makes sense.
Example:
Choice 1
sub choice
sub choice
sub choice
I would like to be able to click the first checkbox (Choice 1) to enable the sub choices. If it's not clicked, the sub choices should be disabled. :-)
Here is what I've got so far:
<script>
function enableRadios(x) {
var formElement = eval("checkbox" + x)
if (formElement[0].disabled) {
formElement[0].disabled = false
formElement[1].disabled = false
} else {
formElement[0].disabled = true
formElement[1].disabled = true
}
}</script>
<body><input type="checkbox" name="main" value="main" onClick="enableRadios(x)">
<input disabled type="radio" value="1" name="x">
<input disabled type="radio" value="2" name="x">
<input disabled type="radio" value="3" name="x">
<input disabled type="radio" value="4" name="x">
<input disabled type="radio" value="5" name="x">
<input disabled type="radio" value="6" name="x"></body>
I really appreciate your help!

You need to pass a string containing the radio name 'x', not pass a variable x:
<script>
function toggleRadios(name) {
var elems = document.getElementsByName(name);
for(i=0; i<elems.length; i++) {
elems[i].disabled = !elems[i].disabled;
}
}
</script>
<input type="checkbox" name="main" value="main" onclick="toggleRadios('x')">
<input disabled type="radio" value="1" name="x">
<input disabled type="radio" value="2" name="x">
<input disabled type="radio" value="3" name="x">
<input disabled type="radio" value="4" name="x">
<input disabled type="radio" value="5" name="x">
<input disabled type="radio" value="6" name="x">
http://jsfiddle.net/samliew/B6tF7/