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/

Prop checked checkbox for selected row(s)?

On my table clicking the row will highlight it, and should also check the corresponding checkbox. Furthermore if the checkall checkbox is checked, all rows should be highlighted. If the checks remove, the highlights should be removed. I cannot give ids and would like to do this dynamically with .find() or .closest() or something similar. Any ideas? Thanks in advance! http://jsfiddle.net/7vLdxddr/3/
jQuery
$('table').on('click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
}
else {
$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
});
$("input[type=checkbox].checkall").on("click", function () {
$(this).parents('.table:eq(0)').find('input:checkbox').prop('checked', this.checked);
});

Use an instance of this (which refers to the row clicked on) and find
$(this).find(":checkbox").prop("checked", true);
http://jsfiddle.net/2wpmxdp0/1/

Use the checked property to add and remove class.
$('table').on('click', 'tr', function () {
var $this = $(this),
$rowCheckbox = $this.find(":checkbox");
// Add and remove class based on the class on the row
// You can always use this as the event is bound to the
// row which is clicked. So can use the this context
if ($this.hasClass('selected')) {
$this.removeClass('selected');
// Uncheck the checkbox if already selected
$rowCheckbox.prop('checked', false);
} else {
$this.addClass('selected');
$rowCheckbox.prop('checked', true);
}
});
// No need to use the checkbox selector again
// You have already added the class to it
$(".checkall").on("click", function (e) {
// To make sure the row event is not fired
// due to event bubbling
e.stopPropagation();
var isChecked = this.checked,
$table = $(this).parents('.table:eq(0)'),
$rows = $table.find('tr');
$table.find('input:checkbox').prop('checked', isChecked);
this.checked ? $rows.addClass('selected') : $rows.removeClass('selected');
});
Updated Fiddle

How to show all checked values in AJAX load checkbox group

I've checkbox list that load by ajax and I want to show the checked value in page while user checking each checkbox. Please see below image.
Hear That country and City load from the ajax according to the parent selection. Here there are 4 cites are checked and I want to show those all selected city values below the check boxes.
I've used below jquery code but it doesn't work.
$("#cites input[type='checkbox']").click(function(){
var checkedc = $(this).val();
$('#show_city').html(checkedc);
});

Use .on()
You have to use Event Delegation
Syntax
$( elements ).on( events, selector, data, handler );
like this
$(document).on('change', '#cites input[type="checkbox"]',function () { //better use change event
if (this.checked) {// check if the checkbox is checked
var checkedc = this.value;
$('#show_city').html(checkedc);
}
});
or
$('parentElementPresesntAtDOMready').on('click','#cites input[type="checkbox"]',function(){
// code here
});
Updated After OP's comment
.map()
$(document).on('change', '#cites input[type="checkbox"]', function () {
var checkedc = $('#cites input[type="checkbox"]:checked').map(function () {//use map to create array of checked elements
return this.value;
}).get().join(); //than join array with comma to string
$('#show_city').html(checkedc);
});

I'm completing Tushar's answer so that you get all the checked cities :
$(document).on('change', '#cites input[type="checkbox"]',function () { //better use change event
var listChecked = "";
if (this.checked) {// check if the checkbox is checked
if (this.checked) {
var value = $(this).val();
listChecked = listChecked + value + ";";
}
}
$('#show_city').html(listChecked);
});

Stop element from disappearing when clicked

I'm writing a simple jQuery plugin that will dynamically place a div under a text box whenever it has focus. I've been able to get the position just about right in all the browsers.
I have to attach two event handlers as well on the focus and blur events of the textbox. And it works okay, but the problem is that the div that has been placed under the textbox closes even when we click on it. Now it makes sense why it would so happen, it's because the textbox loses focus, but is there a way I can stop it from happening?
I tried attaching this to the blur event handler -
if($(mainElem).is(":focus")) return;
where mainElem is the div that is shown below the textbox.
Here is a jsFiddle to illustrate the problem.

You are not going to be able to use the blur event if you want to place "clickable" elements in the div that shows. One way to solve this is to bind your event listener to a more global element like the document and then filter out the targets.
Here is a code sample:
$(document).on('click', function (e) {
var targetEl = e.target,
parent = $(e.target).parents()[0];
if (relElem[0] === targetEl || self[0] === targetEl || self[0] === parent) {
$(mainElem).show();
} else {
$(mainElem).hide();
}
});
Here is an update to your fiddle: http://jsfiddle.net/9YHKW/6/

This is a fiddle that I threw together for a project a while back: http://jsfiddle.net/MYcZx/4/
While it is not based off of your fiddle (and I do apologize) I believe that the functionality is much the same as what you're looking for. My example does not include input fields, but rather spans that hold the values. And while I'm not managing focus/blur, you could add a tabIndex attribute to the spans and then add a trigger on focus that would open the menu.
var $sub = $('.subscription');
$sub
.on('click', '.remove', function() {
$(this).parent().remove();
})
.on('click', 'li', function(e) {
var $this = $(this),
$parent = $this.parent(),
$options = $parent.children('li'),
$value = $parent.siblings('.value'),
isMulti = $parent.hasClass('multi'),
values = [];
if(!isMulti) {
$options.removeClass('active');
}
$this.toggleClass('active');
$options.filter('.active').each(function() {
values.push($(this).text());
});
$value.text(values.join(', ') || 'select');
$value[(values.length ? 'add' : 'remove') + 'Class']('set');
});
var $clone = $sub.clone(true);
$('.new')
.on('click', function() {
$(this).before($clone.clone(true));
});

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.