We Keep Coding

Checkboxes by class all selected

I have a dynamic list of checkboxes all with the same class. I want to disable the submit button until all checkboxes in the class "group1" has been selected.
I also only want to do this, when this class is present on the page.
I was did that part this way:
<input type="checkbox" class="group1" value="20" />
<input type="checkbox" class="group1" value="15" />
<input type="checkbox" class="group1" value="14" />
if ($(".group1").length > 0) {
//run below code
}
So I started like this, but am unsure of how to know when, all the checkboxes of that class are selected.
$(document).ready(function() {
$(':input[type="submit"]').prop('disabled', true);
$('input[type="text"]').keyup(function() {
var checkboxes = $('.group1');
if($(this).is(':checked')) {
//if all chekced, enable submit button
$(':input[type="submit"]').prop('disabled', false);
} else {
$(':input[type="submit"]').prop('disabled', true);
}
}
});
});
I have seen this jQuery Array of all selected checkboxes (by class), but as the class can be of any length, I dont know how to check that all are selected.

The easiest way to do this is to compare the total number of checkboxes to the number which are checked, like this:
var $group = $('.group1');
$(':input[type="submit"]').prop('disabled', $group.length != $group.filter(':checked').length);

You can simply check like this, total number of checkboxes and total number of checked checkboxes:
if ($('.group1').length == $('.group1:checked').length) {
// all are checked...
$(':input[type="submit"]').prop('disabled', false);
} else {
$(':input[type="submit"]').prop('disabled', true);
}

var selected = $(".group1:checked").length;
Count the checkboxes wich are checked.

First you will need to bind an event to checkboxes, to every time they change state to re-run the check to enable or disable the button;
Then you can check if all checkboxes are checked comparing the length of your group vs the length of your group filtered by :checked pseudo selector
And to change the state of the submit button, you can use .prop method, that accept an attribute and a state of this attribute as a second parameter. So:
$group1 = $(".group1");
$submit = $('[type=submit]');
if ($group1.length > 0) {
$group1.on('change', checkBoxes)
}
function checkBoxes(){
var $checked = $group1.filter(':checked');
$submit.prop('disabled', $group1.length != $checked.length);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="group1" value="20" />
<input type="checkbox" class="group1" value="15" />
<input type="checkbox" class="group1" value="14" />
<input type="submit" disabled>

Two checkboxes acting as one

I have two checkboxes on a page and I want them to act as only one. For example, I select one, and the other is selected automatically, and vice-versa.
I've managed to select both of them at once, but I can't seem to figure out a way to deselect them at once.
And what's bothering me the most, is that it's probably a super simple line of code that I'm simply not remembering.
Is there a way to do this?

Is this what you're looking for?
$(".test").change(function () {
$(".test").attr("checked", this.checked);
});
<input type='checkbox' class='test'>A<br />
<input type='checkbox' class='test'>B<br />

Here is a solution in pure javascript:
// Select all checkboxes using `.checkbox` class
var checkboxes = document.querySelectorAll('.checkbox');
// Loop through the checkboxes list
checkboxes.forEach(function (checkbox) {
// Then, add `change` event on each checkbox
checkbox.addEventListener('change', function(event) {
// When the change event fire,
// Loop through the checkboxes list and update the value
checkboxes.forEach(function (checkbox) {
checkbox.checked = event.target.checked;
});
});
});
<label><input type="checkbox" class="checkbox"> Item 1</label>
<br>
<label><input type="checkbox" class="checkbox"> Item 2</label>

$(document).ready(function() {
$('#check_one').change(function() {
$('#check_two').prop('checked', $('#check_one').prop('checked'));
});
$('#check_two').change(function() {
$('#check_one').prop('checked', $('#check_two').prop('checked'));
});
});
<form>
<label>Simple checkbox</label>
<input type="checkbox" id="check_one" />
<label>Complicated checkbox</label>
<input type="checkbox" id="check_two" />
</form>
Assuming you have two checkboxes named differently but working in concert, this code would work

html:
<input type="checkbox" id="1" class="handleAsOne">
<input type="checkbox" id="2" class="handleAsOne">
javascript (jquery):
$('.handleAsOne').on('change'){
$('.handleAsOne').prop('checked', false);
$(this).prop('checked', true);
}
if i understood your question correctly you are looking for something like this.

CheckAll/UncheckAll checkbox with jQuery

I have made a check-box checkall/uncheckall.
HTML
<div> Using Check all function </div>
<div id="selectCheckBox">
<input type="checkbox" class="all" onchange="checkAll('selectCheckBox','all','check','true');" />Select All
<input type="checkbox" class="check" onchange="checkAll('selectCheckBox','all','check','false');" />Check Box 1
<input type="checkbox" class="check" onchange="checkAll('selectCheckBox','all','check','false');" />Check Box 2
<input type="checkbox" class="check" onchange="checkAll('selectCheckBox','all','check','false');" />Check Box 3
<input type="checkbox" class="check" onchange="checkAll('selectCheckBox','all','check','false');" />Check Box 4
</div>
main.js
function checkAll(parentId,allClass,checkboxClass,allChecked){
checkboxAll = $('#'+parentId+' .'+allClass);
otherCheckBox = $('#'+parentId+' .'+checkboxClass);
checkedCheckBox = otherCheckBox.filter($('input[type=checkbox]:checked'));
if(allChecked=='false'){
if(otherCheckBox.size()==checkedCheckBox.size()){
checkboxAll.attr('checked',true);
}else{
checkboxAll.attr('checked',false);
}
}else{
if(checkboxAll.attr('checked')){
otherCheckBox.attr('checked',true);
}else{
otherCheckBox.attr('checked',false);
}
}
}
It works fine. But get bulky when I have whole lot of checkboxes. I want to do same work by using jQuery rather than putting onchange on each checkbox. I tried different sort of things but couldnot work. I tried following one:
$('.check input[type="checkbox"]').change(function(e){
checkAll('selectCheckBox','all','check','true');
});
to do same work as onchange event but didnot work. Where do I went wrong.

I think you just need this: You do not need to pass all the arguments and have the inline onchange event attached to it. You can simplify your code.
$(function () {
$('input[type="checkbox"]').change(function (e) {
if(this.className == 'all')
{
$('.check').prop('checked', this.checked); //Toggle all checkboxes based on `.all` check box check status
}
else
{
$('.all').prop('checked', $('.check:checked').length == $('.check').length); // toggle all check box based on whether all others are checked or not.
}
});
});
Demo

Your selector is wrong:
.check input[type="checkbox"]
Above selects any input of type checkbox that has the ancestor with class .check. It'll match this:
<div class="check">
<input type="checkbox".../>
</div>
it should be:
input.check[type="checkbox"]

You closed the string here $('.check input[type='checkbox']') instead, you should use double quotes $('.check input[type="checkbox"]')

Enable/Disable button based on count of multiple checked checkboxes all with different ID's

I have a list of checkboxes in a table like this along with a button:-
<table id="mytable">
<tr><th>checked</th><th>id</th><th>text</th></tr>
<tr><td><input id="cb1" type="checkbox" name="checker1"/></td><td>123</td><td>abc</td></tr>
<tr><td><input id="cb2" type="checkbox" name="checker2"/></td><td>456</td><td>def</td></tr>
<tr><td><input id="cb3" type="checkbox" name="checker3"/></td><td>789</td><td>ghi</td></tr>
<tr><td><input id="cb4" type="checkbox" name="checker4"/></td><td>454</td><td>ghi</td></tr>
<tr><td><input id="cb5" type="checkbox" name="checker5"/></td><td>565</td><td>ghi</td></tr>
</table>
<input type="button" name="myjqbutton" value="My Jquery Button" id="jqb" disabled="true"/>
What i want to do is, only enable the button if 1 or more checkboxes are checked.
Initial thoughts are that I need to count the amount of checkboxes checked in the table, I can do this using a .each to count them into a variable.
var mytable= document.getElementById('mytable');
$('input:checkbox:checked', mytable).each(function() {
// whatever here
});
However, each checkbox will need a changed event to check the count and enable or disable the button depending if count > 0 or not.
Or is there an easier way of achieving this functionality I am looking for.

You could do
$('#mytable input:checkbox').change(function(){
$("#jqb").prop("disabled", $('#mytable input:checkbox:checked').length ===0);
});

It may do what you want:
$('#mytable input[type=checkbox]').click(function(){
if($('#mytable input[type=checkbox]:selected').size()) > 0) $("#jqb").attr('disabled', 'disabled');
else $('.someElement').removeAttr('disabled');

if ($('#mytable :checkbox:checked').length) {
$('#jqb').prop('disabled', false); // Assumes disabled by default
}

Try this one;
$("#jqb").prop("disabled", $("#mytable input:checkbox:checked']").length === 0);

change event is a must, but jQuery provides complex selector to reduce the work on counting checked ones:
$(':checkbox').change(function(e) {
// for a performance considerationg, to reduce selector lookup,
// once a checkbox is checked itself, there must be one or more checkbox checked
// then the selector finds checked checkbox whose id attribute starts with "cb"
if (this.checked || $(':checkbox[id^="cb"]:checked).length >= 1) {
// do stuff
}
});

Uncheck all other checkboxes

I need to clear all other checkboxes when a user clicks a checkbox. Pretty much the same behavior as a radio button. User clicks checkbox 'A' and checkboxes 'B' and 'C' are both unchecked. I am using jquery but I can't figure out how to accomplish this. Any ideas?
Here are how the checkboxes are set u:
<div class="sales_block_one">
<span class="sales_box_option_set"><input type="checkbox" value="1" id="exopt10i11553501716" name="optset[0][id]" /><label for="exopt10i11553501716">Test + £100.00</label></span>
<span class="sales_box_option_set"><input type="checkbox" value="2" id="exopt11i21553501716" name="optset[1][id]" /><label for="exopt11i21553501716">Test + £ 200.00</label></span>
<span class="sales_box_option_set"><input type="checkbox" value="3" id="exopt12i31553501716" name="optset[2][id]" /><label for="exopt12i31553501716">Test 3 + £400.00</label></span>
</div>

if all the checkboxes are siblings, it's just like this,
$(':checkbox').change(function(){
if (this.checked) {
$(this).siblings(':checkbox').attr('checked',false);
}
});
crazy demo
Well, if you really want to copy the behavior of the radio button, simple as this,
$(':checkbox').change(function(){
this.checked = true;
$(this).siblings(':checkbox').attr('checked',false);
});
crazy demo
siblings is when the elements has one same parent/container.
sample
<div>
<input type="checkbox" /><label>A</label>
<input type="checkbox" /><label>B</label>
<input type="checkbox" /><label>C</label>
<input type="checkbox" />​<label>D</label>
</div>
in that, <input>s and <label>s are siblings.
In your case, which it's not siblings, you can do it this way,
$('.sales_block_one :checkbox').change(function() {
var $self = this; // save the current object - checkbox that was clicked.
$self.checked = true; // make the clicked checkbox checked no matter what.
$($self).closest('span') // find the closest parent span...
.siblings('span.sales_box_option_set') // get the siblings of the span
.find(':checkbox').attr('checked',false); // then find the checbox inside each span and then uncheck it.
});​
crazy demo
more about traversing

$("#checkboxA").click(function() {
var checkedStatus = this.checked;
$("#checkboxB_And_C_Selector").each(function() {
this.checked = !checkedStatus;
});
});