We Keep Coding

Fixing toggle all behavior in checkbox element

I'm trying to toggle all checkboxes on a table and my code works but has a few issues and I don't find how to get ride of them. So here is the code:
$(function () {
$('#toggleCheckbox').on('click', function () {
var $toggle = $(this).is(':checked');
$("#codigoArancelarioBody").find("input:checkbox").click();
});
});
Take a look at this Fiddle I setup for testing and do this tests:
Mark the first checkbox (the one at table heading level) the rest of them inside #codigoArancelarioBody get checked and this is right
Mark first the checkbox at the first row (the only at table body level) and then mark the toggleAll you will see how things goes wrong since if I check the toggleAll them all should remain checked and that's the wrong part on my code
How I can fix this? Also I'll like to add a class 'removedAlert' to those TR I mark, how?

You need two click event handlers, one for the check/uncheck all box and one for the other ones
JS
$('#toggleCheckbox').on('click', function () {
var $toggle = $(this).is(':checked');
$("#codigoArancelarioBody").find("input:checkbox").prop("checked", $toggle);
});
$("#codigoArancelarioBody input:checkbox").on('click', function () {
if (!$(this).is(':checked')) {
$('#toggleCheckbox').prop("checked", false);
} else if ($("#codigoArancelarioBody input:checkbox").length == $("#codigoArancelarioBody input:checkbox:checked").length) {
$('#toggleCheckbox').prop("checked", true);
}
});
DEMO
since the same code will be applied in a lot of places on my code and
to avoid DRY, I'll like to pass the selector as a parameter in all
your code solution could you edit your post to achieve this?
$toggleCheckBox = $('#toggleCheckbox');
$checkBoxTbody = $("#codigoArancelarioBody");
$toggleCheckBox.on('click', function () {
var $toggle = $(this).is(':checked');
$checkBoxTbody.find("input:checkbox").prop("checked", $toggle);
});
$checkBoxTbody.find("input:checkbox").on('click', function () {
if (!$(this).is(':checked')) {
$toggleCheckBox.prop("checked", false);
} else if ($checkBoxTbody.find("input:checkbox").length == $checkBoxTbody.find("input:checkbox:checked").length) {
$toggleCheckBox.prop("checked", true);
}
});
DEMO

If you don't need the "click" event for something else you can do this:
$(function () {
$('#toggleCheckbox').on('change', function () {
var toggle = $(this).is(':checked');
$("#codigoArancelarioBody").find("input:checkbox").prop('checked', toggle ).closest('tr').addClass('removedAlert');
});
});

The code is actually executing what you told it to do, i.e. every time I click the checkbox on top click to other checkboxes. This way if a box is checked it will uncheck itself, because it won't mind if the top is checked or not.
What you really want is "when I check the box on top, check all the others, when I uncheck it, then uncheck all the others", which is sort of different as you see.
Try this:
$(function () {
// best practice: always store the selectors you access multiple times
var checkboxes = $("#codigoArancelarioBody").find("input:checkbox"),
toggleAll = $('#toggleCheckbox');
toggleAll.on('click', function () {
// is the top checkbox checked? return true, is it unchecked? Then return false.
var $toggle = $(this).is(':checked');
// .prop('checked', true) makes it checked, .prop('checked', false) makes it unchecked
checkboxes.prop('checked', $toggle);
});
});
see: http://jsfiddle.net/gleezer/nnfg80x1/3/

Moving data using Select-All Checkboxes

Currently I have two tables
I have select-all functions on the top left checkboxes, but clicking on one select-all highlights all checkboxes in BOTH tables, whereas I only want all boxes to be selected in the specific 'check-all' clicked.
Also, when I do select all and click one of the directional buttons < or >, it drags all the rows fine but drags the headers with it as shown here:
My JQuery is quite simple at the moment but I'm obviously missing out on something -
$('#select-all').click(function (event) {
if (this.checked) {
// Iterate each checkbox
$(':checkbox').each(function () {
this.checked = true;
});
}
else
// Iterate each checkbox
$(':checkbox').each(function () {
this.checked = false;
});
});
Where 'select-all' is the id of the select-all checkbox in the 'tarifs de quittancement'.
Any help is appreciated
EDIT
My JQuery for the > button code is as follows :
$("#move-to-1").on("click", function () {
var selected = $("#table2").find("input:checked");
selected.each(function (idx, elem) {
$(elem).closest("tr").detach().appendTo($("#table1 tbody"));
});
});
This works fine to move all from one table to the other, but I don't want the row containing the select-all checkbox/table headers to move with the rest of the row data. How can this be done?
Thanks again.
Further Edit
Now it's all sorted, except for a small bug where selecting one checkbox row (not select-all) and moving it < or > results in ALL rows being moved.
JQuery in use:
$('#move-to-1').on('click', function () {
var selected = $('#table2').find('input:checked');
selected.each(function (idx, elem) {
$(elem).closest('tbody').find('tr').detach().appendTo($("#table1 tbody"));
$('input[type=checkbox]').attr('checked', false);
});
});
$('#select-all').click(function (event) {
$(this).closest('table').find(':checkbox').prop('checked', this.checked);
});

You only need to modify the checkboxes inside the current table. Since you haven't shown your markup it is extremely hard to guess how the proper selector might look or whether you are using tables at all but try like this:
$('#select-all').click(function (event) {
$(this).closest('table').find(':checkbox').prop('checked', this.checked);
});
UPDATE:
To address your second question, assuming you have separated the headers from the body inside those tables using the <thead> and <tbody> sections which is the correct way, you could adapt your selector:
$('#move-to-1').on('click', function () {
var selected = $('#table2 tbody').find('input:checked');
selected.each(function (idx, elem) {
$(elem).closest('tr').detach().appendTo($("#table1 tbody"));
});
});

$('#select-all').click(function (event) {
// mention the table
var table = $('selector_to_your_table');
if (this.checked) {
// Iterate each checkbox
table.find(':checkbox').each(function () {
this.checked = true;
});
}
else
// Iterate each checkbox
table.find(':checkbox').each(function () {
this.checked = false;
});
});
Note
In latest version of jQuery :checkbox is deprecated. See here..
Instead of :checkbox use input[type=checkbox].

Instead of:
$(':checkbox').each(function () {
this.checked = true;
});
Do:
$('some_sort_of_selector :checkbox').attr('checked', true);
You don't need that each() loop - jQuery does it automatically. You need some kind of selector to limit which checkboxes are changed.
I notice you have #select-all - and yet you say you have two select-all checkboxes. You can't do that. ID's must be unique.

Enabling checkbox with different elements

Ok, I've been coding a website for a while now and this the first "insurmountable" problem I haven't found an aswer for, so now I'm turning to you, the experts.
On my form I have three drop-down menus, one textbox and one disabled checkbox. I want it to work so that when a user has selected an option from each drop-down menu and written something on the textbox, the checkbox becomes enabled.
I have found this code when I have been looking for a solution and it's very similar to my problem. However, when I try to add another drop-down menu, it still enables the button when I select an option from the first menu and completely ignores the second menu. I'm sorry, I'm new to Jquery/JavaScript and I just think it should work that way when the class names are same on both menus (jQuery class selector: ('.dropdown')).
I have also found a similar code with textboxes. I just don't know how to combine these codes so it would act the way I want.

See it here: http://jsfiddle.net/JKmkL/109/
$(document).ready(function() {
$('.required').change(function() {
var done=true;
$('.required').each(function(){
if(!$(this).val()){
$('.myCheckBox').prop('disabled',true);
done=false;
return false;
}
});
if(done){$('.myCheckBox').prop('disabled',false);}
});
});
And add class required to the elements.
Edit:
The code above assumes that the default <option> has value="". If not, you can use http://jsfiddle.net/JKmkL/114/
$(document).ready(function() {
$('.required').change(function() {
var done=true;
function quit(){
$('.myCheckBox').prop('disabled',true);
done=false;
return false;
}
$('.required.dropdown').each(function(){
if($(this).children(':selected').hasClass("disablenext")){
return quit();
}
});
$('.required[type=text]').each(function(){
if(!$(this).val()){
return quit();
}
});
if(done){$('.myCheckBox').prop('disabled',false);}
});
});
Edit 2:
If you want to show a div when the checkbox is checked and hide it when the checkbox is disabled, use
JavaScript:
$(document).ready(function() {
$('.required').change(function() {
var done=true;
function quit(){
$('.myCheckBox').prop('disabled',true).removeAttr('checked');
done=false;
$('#div2').addClass('hide');
return false;
}
$('.required.dropdown').each(function(){
if($(this).children(':selected').hasClass("disablenext")){
return quit();
}
});
$('.required[type=text]').each(function(){
if(!$(this).val()){
return quit();
}
});
if(done){$('.myCheckBox').prop('disabled',false);}
});
$('.myCheckBox').click(function(){
$('#div2')[(this.checked?'remove':'add')+'Class']('hide');
});
});
CSS:
.hide{display:none}
See it here: http://jsfiddle.net/JKmkL/133/

I assume that dropdown's default value is value=""
$('#form_submit_button').click(function(){
$('.checkbox').attr('disabled',true);
var all_selected = true;
$('.dropdown').each(function(){
if(!$(this).val())
{
all_selected = false;
}
});
if(!$('#text_box').text())
{
all_selected = false;
}
if(all_selected)
{
$('.checkbox').attr('disabled',false);
}
});

First of all, say the id for the three dropdowns are called d1, d2, and d3; textbox is txt; and checkbox is chk. You can then define a function that determines when the checkbox must be enabled:
function shouldEnableCheckbox() {
var nonEmptyFields = $("#d1,#d2,#d3,#txt").filter(function() {
return this.value;
});
return nonEmptyFields.length == 4;
}
Essentially, you select all 4 elements, filter those that are non-empty, and compare the resulting filtered array with 4. If it is true, it means you should enable the checkbox.
Then, assign the change event handler to all 4 elements, invoke the previous function, and assign the result to the disabled property of the checkbox:
$("#d1,#d2,#d3,#txt").change(function() {
$("#chk").prop("disabled", !shouldEnableCheckbox());
});​
Here's the working DEMO, and another working, more generic DEMO, which uses a class instead of ids to identify the required elements.

control a checkbox via an IMG using jquery

I want to control the checked state of a checkbox when a user clicks on an image with the class of ".latinAmerica" within the page. Each click should check/uncheck it each time.
I've tried a ton of different methods but I can't find anything suitable for checkboxes.
EG:
$('.latinAmerica').click(function () {
if($('input:checkbox[name=theName]:nth(0)').is(':checked')) {
$('input:checkbox[name=theName]:nth(0)').attr('checked',true);
} else {
$('input:checkbox[name=theName]:nth(0)').attr('checked',false);
}
});
or
$('.latinAmerica').click(function () {
$("input:checkbox[name=theName]:nth(0)").prop("checked", true);
});
I did get this method working with radio buttons:
$('.latinAmerica').click(function () {
$('input:checkbox[name=theName]:nth(0)').attr('checked',true);
});
But no luck with checkboxes.
What am I doing wrong :(
Thanks.

$(function() {
$(".latinamerica").click(function() {
var cb = $("input[name='theName']");
if(cb.is(":checked")) {
cb.prop("checked", "");
} else {
cb.prop("checked", "checked");
}
});
});
Fiddle: http://jsfiddle.net/JFDxj/

The if condition is wrong so it must not doing anything i.e. checkedbox is checked when it is already checked and unchecked when it is already unchecked.
$('.latinAmerica').click(function () {
if($('input:checkbox[name=theName]:nth(0)').is(':checked')) {
$('input:checkbox[name=theName]:nth(0)').attr('checked',false);
} else {
$('input:checkbox[name=theName]:nth(0)').attr('checked',true);
}
});

Radio - click action and length action

I have radios button on the page, when the page load, it will use length action to check and then hide/show some elements.
When user click on the radio, it will then hide and show some elements.
I'm wondering is this correct way doing it? Or how can it be improved?
$(document).ready(function() {
if ($(".delivery_type:radio").length > 0) {
if ($('#methodPickup').is(':checked')) {
$(".methodDelivery").hide();
$("#addressBookSelectBlock").hide();
$(".customAddress").hide();
}
if ($('#methodDelivery').is(':checked')) {
$(".methodPickup").hide();
}
}
$(".delivery_type:radio").live('click', function() {
if ($(this).val() == "pickup") {
$(".methodDelivery").hide();
$(".methodPickup").show();
$("#addressBookSelectBlock").hide();
$(".customAddress").hide();
}
if ($(this).val() == "delivery") {
if ($(".selectAddressList").length == 0) {
$(".customAddress").show();
}
$(".methodDelivery").show();
$(".methodPickup").hide();
$("#addressBookSelectBlock").show();
}
});
});

You could combine all the hide() and show() functions together:
if ($('#methodPickup').is(':checked')) {
$(".methodDelivery, #addressBookSelectBlock, .customAddress").hide();
}
// etc...
Also, I'm not sure why you are using live() unless the radio buttons are being dynamically added or removed; just use click() if they are not dynamic.
Sharing some HTML and a little more information might help with more suggestions.