Develop Reference

Radio button calculator with nested if Stateme

I am trying to create a pricing calculator that takes all of the checked radio buttons and pushes them into an array where it is added in the end. However, I would like to have one of the radio buttons take the attribute of the first radio button and multiply it by its own value.
I tried nesting an if statement inside of another if statement but it will only seem to add the values of the first if statement and ignore the second.
$(".w-radio").change(function() {
var totalPrice = 0,
values = [];
$("input[type=radio]").each(function() {
if ($(this).is(":checked")) {
if ($(this).is('[name="catering"]')) {
var cateringFunc = (
$(this).val() * $('[name="gastronomy"]').attr("add-value")
).toString();
values.push($(this).val());
}
values.push($(this).val());
totalPrice += parseInt($(this).val());
}
});
$("#priceTotal span").text(totalPrice);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="hack43-radio-group w-radio">
<input type="radio" name="gastronomy" value="0" add-value="10">0<BR>
<input type="radio" name="gastronomy" value="550" add-value="10">550<BR>
<input type="radio" name="gastronomy" value="550" add-value="10">550<BR>
<input type="radio" name="gastronomy" value="550" add-value="10">550<BR>
</label>
<br>
<label class="hack43-radio-group w-radio">
<input type="radio" name="venue" value="0">0<BR>
<input type="radio" name="venue" value="10500">10500<BR>
<input type="radio" name="venue" value="10500">10500<BR>
<input type="radio" name="venue" value="10500">10500<BR>
</label>
<br>
<label class="hack43-radio-group w-radio">
<input type="radio" name="catering" value="0">0<BR>
<input type="radio" name="catering" value="40">40<BR>
<input type="radio" name="catering" value="45">45<BR>
<input type="radio" name="catering" value="60">60<BR>
</label>
<div class="hack42-45-added-value-row">
<div id="priceTotal">
<span>0</span>
</div>
</div>

When the condition is true you should use cateringFunc instead of $(this).val() when pushing into the values array and adding to totalPrice.
I assume you only want to get the added value from the selected radio button, so I added :checked to the selector. Then you also need to provide a default value if none of the gastronomy buttons are checked.
You shouldn't make up new attributes like add-value. If you need custom attributes, use data-XXX. These can be accessed using the jQuery .data() method.
$(".w-radio").change(function() {
var totalPrice = 0,
values = [];
$("input[type=radio]:checked").each(function() {
if ($(this).is('[name="catering"]')) {
var cateringFunc = (
$(this).val() * ($('[name="gastronomy"]:checked').data("add-value") || 0)
);
values.push(cateringFunc.toString());
totalPrice += cateringFunc;
}
values.push($(this).val());
totalPrice += parseInt($(this).val());
});
$("#priceTotal span").text(totalPrice);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="hack43-radio-group w-radio">
<input type="radio" name="gastronomy" value="0" data-add-value="10">0<BR>
<input type="radio" name="gastronomy" value="550" data-add-value="10">550<BR>
<input type="radio" name="gastronomy" value="550" data-add-value="10">550<BR>
<input type="radio" name="gastronomy" value="550" data-add-value="10">550<BR>
</label>
<br>
<label class="hack43-radio-group w-radio">
<input type="radio" name="venue" value="0">0<BR>
<input type="radio" name="venue" value="10500">10500<BR>
<input type="radio" name="venue" value="10500">10500<BR>
<input type="radio" name="venue" value="10500">10500<BR>
</label>
<br>
<label class="hack43-radio-group w-radio">
<input type="radio" name="catering" value="0">0<BR>
<input type="radio" name="catering" value="40">40<BR>
<input type="radio" name="catering" value="45">45<BR>
<input type="radio" name="catering" value="60">60<BR>
</label>
<div class="hack42-45-added-value-row">
<div id="priceTotal">
<span>0</span>
</div>
</div>

using checkboxes for multiple instances

I have this script. Everything is working except I need to make it work with multi-able items. The first set of work perfectly, but I can seam to replicate it on the second and third set of check boxes.
$(".checkall").on('change', function()
{
// all normal checkboxes will have a class "chk_xxxxxx"
// where "xxxx" is the name of the location, e.g. "chk_wales"
// get the class name from the id of the "check all" box
var checkboxesClass = '.chk_' + $(this).attr("id");
// now get all boxes to check
var boxesToCheck = $(checkboxesClass);
// check all the boxes
boxesToCheck.prop('checked', this.checked);
});
$("#check1 input[type=checkbox], #wales").on("change", function()
{
checkBoxes();
});
function checkBoxes()
{
$("#checked").empty();
if($("#check1 input[type=checkbox]:checked").length == $("#check1 input[type=checkbox]").length)
{
$("#wales").prop("checked", true);
// Display the id of the "check all" box
$("#checked").html($("#checked").html() + "<h3>Wales</h3>");
}
else
{
$("#wales").prop("checked", false);
$("#check1 input[type=checkbox]:checked").each(function()
{
$("#checked").html($("#checked").html() + $(this).next().text() + "<br>");
});
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- <input type="checkbox" id="wales" class="checkall" value="1">
<label for="wales" >Check All</label>
<input type="checkbox" id="checkItem1" value="2" class="chk_wales">
<label for="checkItem1" >Item 1</label>
<input type="checkbox" id="checkItem2" value="2" class="chk_wales">
<label for="checkItem2" >Item 2</label>
<input type="checkbox" id="checkItem3" value="2" class="chk_wales">
<label for="checkItem3" >Item 3</label>-->
<hr />
<input type="checkbox" id="wales" class="checkall" value="1">
<label for="wales">Check All</label>
<section id="check1">
<input type="checkbox" id="checkItem1" value="2" class="chk_wales">
<label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem2" value="2" class="chk_wales">
<label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem3" value="2" class="chk_wales">
<label for="checkItem3">Item 3</label>
</section>
<hr />
<input type="checkbox" id="west" class="checkall" value="3">
<label for="west">Check All</label>
<section id="check2">
<input type="checkbox" id="checkItem4" value="4" class="chk_west">
<label for="checkItem4">Item 1</label>
<input type="checkbox" id="checkItem5" value="4" class="chk_west">
<label for="checkItem5">Item 2</label>
<input type="checkbox" id="checkItem6" value="4" class="chk_west">
<label for="checkItem6">Item 3</label>
</section>
<hr />
<input type="checkbox" id="east" class="checkall" value="5">
<label for="east">Check All</label>
<section id="check3">
<input type="checkbox" id="checkItem7" value="6" class="chk_east">
<label for="checkItem7">Item 1</label>
<input type="checkbox" id="checkItem8" value="6" class="chk_east">
<label for="checkItem8">Item 2</label>
<input type="checkbox" id="checkItem9" value="6" class="chk_east">
<label for="checkItem9">Item 3</label>
</section>
<p>You have selected:</p>
<div id="checked">
</div>
</body>
</html>
Please can anyone help?
Many thanks in advance.

remove checkBoxes() method and replace the last event handlers as (check this fiddle)
//put the event handler directly on the checkboxes inside the section
$( "section input[type='checkbox']" ).on("change", function()
{
console.log( $( this ) );
//get the handle to the parent section
var $parentSection = $( this ).parent();
//compare the number of checked checkboxes with total one
if( $parentSection.find( "input[type='checkbox']:checked" ).length == $parentSection.find( "input[type=checkbox]" ).length )
{
$parentSection.prev().prev().prop("checked", true);
//write checkall's textbox id
$("#checked").append( "<h3>" + $parentSection.prev().prev().attr( "id" ) + "</h3>");
}
else
{
$parentSection.prev().prev().prop("checked", false);
//write each and every checked box's text
$parentSection.find("input[type='checkbox']:checked").each(function()
{
$("#checked").html($("#checked").html() + $(this).next().text() + "<br>");
});
}
});

Following code snippet should fulfill your requirements. Hope this will help you.
var checkedDiv = $("#checked");
$('input[type=checkbox]').on('change', function() {
if (this.className == 'checkall') {
var section = $(this).nextAll('section:first');
section.find('input[type=checkbox]').prop('checked', this.checked);
} else {
var parentSection = $(this).parent();
var checkall = parentSection.prevAll(".checkall:first")
var isEqual = parentSection.find("input[type=checkbox]:checked").length == parentSection.find("input[type=checkbox]").length;
checkall.prop("checked", isEqual);
}
checkedDiv.html('');
$('.checkall').each(function() {
if (this.checked) {
checkedDiv.append('<h3>' + this.id + '</h3><br/>');
} else {
var section = $(this).nextAll('section:first');
section.find("input[type=checkbox]:checked").each(function() {
checkedDiv.append($(this).next().text() + "<br>");
});
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="wales" class="checkall" value="1">
<label for="wales">Check All</label>
<section id="check1">
<input type="checkbox" id="checkItem1" value="2" class="chk_wales">
<label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem2" value="2" class="chk_wales">
<label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem3" value="2" class="chk_wales">
<label for="checkItem3">Item 3</label>
</section>
<hr />
<input type="checkbox" id="west" class="checkall" value="3">
<label for="west">Check All</label>
<section id="check2">
<input type="checkbox" id="checkItem4" value="4" class="chk_west">
<label for="checkItem4">Item 1</label>
<input type="checkbox" id="checkItem5" value="4" class="chk_west">
<label for="checkItem5">Item 2</label>
<input type="checkbox" id="checkItem6" value="4" class="chk_west">
<label for="checkItem6">Item 3</label>
</section>
<hr />
<input type="checkbox" id="east" class="checkall" value="5">
<label for="east">Check All</label>
<section id="check3">
<input type="checkbox" id="checkItem7" value="6" class="chk_east">
<label for="checkItem7">Item 1</label>
<input type="checkbox" id="checkItem8" value="6" class="chk_east">
<label for="checkItem8">Item 2</label>
<input type="checkbox" id="checkItem9" value="6" class="chk_east">
<label for="checkItem9">Item 3</label>
</section>
<p>You have selected:</p>
<div id="checked"></div>

check all check boxes

I’m having some problems with some JavaScript I created. When a item from check all is Unchecked it needs to remove the checked from the checked all box, also when the check all is checked I don’t want to to pull through the other items only the check all box.
check all, item 1, item 2
Remove item 1 and check all un-checks and all that gets pulled through is item. If check all is checked the item 1 and item 2 are checked but then not pulled through.
// all "check all" checkboxes will have the class "checkall"
// and the id to match the location, e.g. wales, etc
$(".checkall").on('change', function() {
// all normal checkboxes will have a class "chk_xxxxxx"
// where "xxxx" is the name of the location, e.g. "chk_wales"
// get the class name from the id of the "check all" box
var checkboxesClass = '.chk_' + $(this).attr("id");
// now get all boxes to check
var boxesToCheck = $(checkboxesClass);
// check all the boxes
boxesToCheck.prop('checked', this.checked);
});
// display what the user has chosen
$("input[type='checkbox']").change(function() {
$("#checked").empty();
$("input[type='checkbox']:checked").each(function() {
// see if it is a "check all" box
if ($(this).attr("class") === "checkall") {
// Display the id of the "check all" box
$("#checked").html($("#checked").html() + '<h3>' + $(this).attr("id").toUpperCase() + "</h3>");
} else {
// display the label text for all normal checkboxes
$("#checked").html($("#checked").html() + $(this).next().text() + "<br>");
}
});
});
// With some more work you could make the Check All headings show when only one or two checkboxes were checked. It depends how you need it to work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="wales" class="checkall" value="1">
<label for="wales">Check All</label>
<input type="checkbox" id="checkItem1" value="2" class="chk_wales">
<label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem2" value="2" class="chk_wales">
<label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem3" value="2" class="chk_wales">
<label for="checkItem3">Item 3</label>
<hr />
<input type="checkbox" id="west" class="checkall" value="3">
<label for="west">Check All</label>
<input type="checkbox" id="checkItem4" value="4" class="chk_west">
<label for="checkItem4">Item 1</label>
<input type="checkbox" id="checkItem5" value="4" class="chk_west">
<label for="checkItem5">Item 2</label>
<input type="checkbox" id="checkItem6" value="4" class="chk_west">
<label for="checkItem6">Item 3</label>
<hr />
<input type="checkbox" id="east" class="checkall" value="5">
<label for="east">Check All</label>
<input type="checkbox" id="checkItem7" value="6" class="chk_east">
<label for="checkItem7">Item 1</label>
<input type="checkbox" id="checkItem8" value="6" class="chk_east">
<label for="checkItem8">Item 2</label>
<input type="checkbox" id="checkItem9" value="6" class="chk_east">
<label for="checkItem9">Item 3</label>
<p>You have selected:</p>
<div id="checked">
</div>
</body>
</html>

Not sure what you mean by 'pulled through', but unchecking the check-all can be achieved through:
if (!$currentCheckbox.hasClass('checkall')) {
var $previousCheckAll = $currentCheckbox.prevAll('.checkall');
if ($previousCheckAll.length>0)
{
$previousCheckAll.first().prop('checked',false);
}
}
Just insert the code above beneath the line
$("#checked").empty();
of your JSbin.

This code should work if im not mistaken what you are trying to say. I have done for first set of checkboxes. You can do it for next two:
$("#check1 input[type=checkbox]").on("change", function() {
if($("#check1 input[type=checkbox]:checked").length == $("#check1 input[type=checkbox]").length) {
$("#wales").prop("checked",true);
}
else {
$("#wales").prop("checked",false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="wales" class="checkall" value="1">
<label for="wales">Check All</label>
<section id="check1">
<input type="checkbox" id="checkItem1" value="2" class="chk_wales">
<label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem2" value="2" class="chk_wales">
<label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem3" value="2" class="chk_wales">
<label for="checkItem3">Item 3</label>
</section>
UPDATE
This will fulfill your requirement. Remove your $("input[type='checkbox']").change(function() code and use the updated one
$("#check1 input[type=checkbox]").on("change", function()
{
$("#checked").empty();
if($("#check1 input[type=checkbox]:checked").length == $("#check1 input[type=checkbox]").length)
{
$("#wales").prop("checked", true);
// Display the id of the "check all" box
$("#checked").html($("#checked").html() + "<h3>Wales</h3>");
}
else
{
$("#wales").prop("checked", false);
$("#check1 input[type=checkbox]:checked").each(function()
{
$("#checked").html($("#checked").html() + $(this).next().text() + "<br>");
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="wales" class="checkall" value="1">
<label for="wales">Check All</label>
<section id="check1">
<input type="checkbox" id="checkItem1" value="2" class="chk_wales">
<label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem2" value="2" class="chk_wales">
<label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem3" value="2" class="chk_wales">
<label for="checkItem3">Item 3</label>
</section>
<hr/>
<div id="checked">
</div>
Another Update
$(".checkall").on('change', function()
{
// all normal checkboxes will have a class "chk_xxxxxx"
// where "xxxx" is the name of the location, e.g. "chk_wales"
// get the class name from the id of the "check all" box
var checkboxesClass = '.chk_' + $(this).attr("id");
// now get all boxes to check
var boxesToCheck = $(checkboxesClass);
// check all the boxes
boxesToCheck.prop('checked', this.checked);
});
$("#check1 input[type=checkbox], #wales").on("change", function()
{
checkBoxes();
});
function checkBoxes()
{
$("#checked").empty();
if($("#check1 input[type=checkbox]:checked").length == $("#check1 input[type=checkbox]").length)
{
$("#wales").prop("checked", true);
// Display the id of the "check all" box
$("#checked").html($("#checked").html() + "<h3>Wales</h3>");
}
else
{
$("#wales").prop("checked", false);
$("#check1 input[type=checkbox]:checked").each(function()
{
$("#checked").html($("#checked").html() + $(this).next().text() + "<br>");
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="wales" class="checkall" value="1">
<label for="wales">Check All</label>
<section id="check1">
<input type="checkbox" id="checkItem1" value="2" class="chk_wales">
<label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem2" value="2" class="chk_wales">
<label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem3" value="2" class="chk_wales">
<label for="checkItem3">Item 3</label>
</section>
<hr/>
<div id="checked">
</div>

Javascript classlist object and query selector to toggle

Can someone help me, because I'm stuck right now. I have to make a form toggle betweeen two fieldsets using classlist object and queryselector. I have to use a function in Javascript that adds the classlist to the fieldset.
Right now, this is my code in javascript:
var click = document.querySelector('form>fieldset>label>input[type="radio"]');
var project = document.querySelector(".project");
var stage = document.querySelector(".stage");
click.addEventListener("click", function() {
if (click === "stage") {
project.classList.toggle(".project");
}
else {
stage.classList.toggle(".stage");
}
});
This is my code in HTML:
<fieldset>
<legend>Ik wil mij aanmelden:</legend>
<label>
<input type="radio" name="submit-for" value="project">
<span>Voor een project</span>
</label>
<label>
<input type="radio" name="submit-for" value="stage">
<span>Als stagebedrijf</span>
</label>
</fieldset>
<fieldset id="project" class="project">
<legend>Project</legend>
<label>
<span>Titel:</span>
<input type="text" name="project-title">
</label>
<label>
<span>Opdrachtomschrijving:</span>
<textarea name="project-description"></textarea>
</label>
<label>
<span>Doelgroepomschrijving:</span>
<textarea name="project-target-audience"></textarea>
</label>
<label>
<span>Doelstelling/intentie van het project:</span>
<textarea name="project-goal"></textarea>
</label>
<label>
<span>Looptijd:</span>
<input type="text" name="project-duration">
</label>
<label>
<span>Deadline:</span>
<input type="date" name="project-deadline">
</label>
<fieldset>
<legend>Geschikt voor</legend>
<label><input type="checkbox" name="project-eerstejaars"> Eerstejaars studenten</label>
<label><input type="checkbox" name="project-tweedejaars"> Tweedejaars studenten</label>
<label><input type="checkbox" name="project-derdejaars"> Derdejaars studenten</label>
<label><input type="checkbox" name="project-afstudeer"> Afstudeer studenten</label>
<label><input type="checkbox" name="project-onbekend"> Onbekend</label>
</fieldset>
<label>
<span>Opmerking:</span>
<textarea name="project-comments"></textarea>
</label>
</fieldset>
<fieldset id="stage" class="stage">
<legend>Stage</legend>
<fieldset>
<legend>Geschikt voor</legend>
<label><input type="checkbox" name="stage-tweedejaars"> Tweedejaars studenten</label>
<label><input type="checkbox" name="stage-afstudeerders"> Afstudeer studenten</label>
<label><input type="checkbox" name="stage-onbekend"> Onbekend</label>
</fieldset>
<fieldset>
<legend>Hoe lang is de stage</legend>
<label><input type="radio" name="stage-duration" value="10"> 10 weken</label>
<label><input type="radio" name="stage-duration" value="20"> 20 weken</label>
</fieldset>
<label>
<span>Begindatum:</span>
<input type="date" name="stage-startdate">
</label>
<label>
<span>Beschrijving stagewerkzaamheden</span>
<textarea name="stage-description"></textarea>
</label>
<fieldset>
<legend>Beschrijving stagebedrijf</legend>
<label>
<span>Bedrijfsnaam:</span>
<input type="text" name="stage-company-name">
</label>
<label>
<span>Adres:</span>
<input type="text" name="stage-address">
</label>
<label>
<span>Postcode:</span>
<input type="text" name="stage-postal">
</label>
<label>
<span>Plaats:</span>
<input type="text" name="stage-place">
</label>
<label>
<span>Sector:</span>
<input type="text" name="stage-sector">
</label>
<label>
<span>Core business:</span>
<input type="text" name="stage-core-business">
</label>
</fieldset>
<label>
<span>Opmerking:</span>
<textarea name="stage-comments"></textarea>
</label>
</fieldset>
<input type="submit" value="Aanmelden">
</form>
And this is my code in CSS:
.project {
display: none;
}
.stage {
display: none;
}
The fieldsets called "Project" and "Stage" have to toggle. So, when I click on the radio button called project, the stage form has to disappear, vice versa.
I can't use onclick, because my teacher don't want me to use that.

You have some problems in your code:
You fogot the start form tag.
project.classList.toggle(".project"); need to be project.classList.toggle("project");
2.1 You can't use toggle classes in this case, because you don't want to toggle, you want to add and remove. You want to show just one section on the same time. right?
You have multiple checkboxes so you need to attach click event to each of them.
var click = document.querySelectorAll('form fieldset:first-child>label>input[type="radio"]');
var project = document.querySelector(".project");
var stage = document.querySelector(".stage");
for (var cl = 0; cl < click.length; cl++) {
click[cl].addEventListener("change", function() {
//if (this.value === "stage") {
project.classList.toggle("show");
project.classList.toggle("hide");
stage.classList.toggle("show");
stage.classList.toggle("hide");
//stage.classList.remove("hide");
//}
//else {
// project.classList.remove("hide");
// stage.classList.add("hide");
//}
});
}
.hide {
display:none;
}
<form>
<fieldset>
<legend>Ik wil mij aanmelden:</legend>
<label>
<input type="radio" name="submit-for" value="project" checked="checked">
<span>Voor een project</span>
</label>
<label>
<input type="radio" name="submit-for" value="stage">
<span>Als stagebedrijf</span>
</label>
</fieldset>
<fieldset id="project" class="project hide">
<legend>Project</legend>
<label>
<span>Titel:</span>
<input type="text" name="project-title">
</label>
<label>
<span>Opdrachtomschrijving:</span>
<textarea name="project-description"></textarea>
</label>
<label>
<span>Doelgroepomschrijving:</span>
<textarea name="project-target-audience"></textarea>
</label>
<label>
<span>Doelstelling/intentie van het project:</span>
<textarea name="project-goal"></textarea>
</label>
<label>
<span>Looptijd:</span>
<input type="text" name="project-duration">
</label>
<label>
<span>Deadline:</span>
<input type="date" name="project-deadline">
</label>
<fieldset>
<legend>Geschikt voor</legend>
<label><input type="checkbox" name="project-eerstejaars"> Eerstejaars studenten</label>
<label><input type="checkbox" name="project-tweedejaars"> Tweedejaars studenten</label>
<label><input type="checkbox" name="project-derdejaars"> Derdejaars studenten</label>
<label><input type="checkbox" name="project-afstudeer"> Afstudeer studenten</label>
<label><input type="checkbox" name="project-onbekend"> Onbekend</label>
</fieldset>
<label>
<span>Opmerking:</span>
<textarea name="project-comments"></textarea>
</label>
</fieldset>
<fieldset id="stage" class="stage">
<legend>Stage</legend>
<fieldset>
<legend>Geschikt voor</legend>
<label><input type="checkbox" name="stage-tweedejaars"> Tweedejaars studenten</label>
<label><input type="checkbox" name="stage-afstudeerders"> Afstudeer studenten</label>
<label><input type="checkbox" name="stage-onbekend"> Onbekend</label>
</fieldset>
<fieldset>
<legend>Hoe lang is de stage</legend>
<label><input type="radio" name="stage-duration" value="10"> 10 weken</label>
<label><input type="radio" name="stage-duration" value="20"> 20 weken</label>
</fieldset>
<label>
<span>Begindatum:</span>
<input type="date" name="stage-startdate">
</label>
<label>
<span>Beschrijving stagewerkzaamheden</span>
<textarea name="stage-description"></textarea>
</label>
<fieldset>
<legend>Beschrijving stagebedrijf</legend>
<label>
<span>Bedrijfsnaam:</span>
<input type="text" name="stage-company-name">
</label>
<label>
<span>Adres:</span>
<input type="text" name="stage-address">
</label>
<label>
<span>Postcode:</span>
<input type="text" name="stage-postal">
</label>
<label>
<span>Plaats:</span>
<input type="text" name="stage-place">
</label>
<label>
<span>Sector:</span>
<input type="text" name="stage-sector">
</label>
<label>
<span>Core business:</span>
<input type="text" name="stage-core-business">
</label>
</fieldset>
<label>
<span>Opmerking:</span>
<textarea name="stage-comments"></textarea>
</label>
</fieldset>
<input type="submit" value="Aanmelden">
</form>

Is there a way to enable a button if at least one checkbox is checked with knockout?

I'm trying to see if I can find a knockout equivalent for this bit of jQuery:
http://jsfiddle.net/chriscoyier/BPhZe/76/
This is what I have to far, but all the items are bound to the same observable so it obviously doesn't work.
html:
<form>
<div>
<input type="checkbox" name="option-1" id="option-1" data-bind="checked: buttonEnabled"> <label for="option-1">Option 1</label>
</div>
<div>
<input type="checkbox" name="option-2" id="option-2" data-bind="checked: buttonEnabled"> <label for="option-2">Option 2</label>
</div>
<div>
<input type="checkbox" name="option-3" id="option-3" data-bind="checked: buttonEnabled"> <label for="option-3">Option 3</label>
</div>
<div>
<input type="checkbox" name="option-4" id="option-4" data-bind="checked: buttonEnabled"> <label for="option-4">Option 4</label>
</div>
<div>
<input type="checkbox" name="option-5" id="option-5" data-bind="checked: buttonEnabled"> <label for="option-5">Option 5</label>
</div>
<div>
<input type="button" value="Do thing" data-bind="enable: buttonEnabled">
</div>
</form>
javascript:
var viewModel = {
buttonEnabled: ko.observable(true)
};
ko.applyBindings(viewModel);
http://jsfiddle.net/dludlow/WdWEW/

Yes. See the updated jsFiddle here: http://jsfiddle.net/WdWEW/4/
I did a few things.
I added a unique value attribute to each of the checkboxes
I bound the checkboxes to a new property on the view model named options which is an observableArray
I changed buttonEnabled to a computed property that returns true if the options property has a length greater than zero.
Here's the updated view model.
var viewModel = function() {
var self = this;
this.options = ko.observableArray(),
this.buttonEnabled = ko.computed(function() {
return self.options().length > 0;
});
};
ko.applyBindings(new viewModel());
Here's the updated view:
<form>
<div>
<input type="checkbox" name="option-1" id="option-1" value="1" data-bind="checked: options"> <label for="option-1">Option 1</label>
</div>
<div>
<input type="checkbox" name="option-2" id="option-2" value="2" data-bind="checked: options"> <label for="option-2">Option 2</label>
</div>
<div>
<input type="checkbox" name="option-3" id="option-3" value="3" data-bind="checked: options"> <label for="option-3">Option 3</label>
</div>
<div>
<input type="checkbox" name="option-4" id="option-4" value="4" data-bind="checked: options"> <label for="option-4">Option 4</label>
</div>
<div>
<input type="checkbox" name="option-5" id="option-5" value="5" data-bind="checked: options"> <label for="option-5">Option 5</label>
</div>
<div>
<input type="button" value="Do thing" data-bind="enable: buttonEnabled">
</div>
</form>​