control a checkbox via an IMG using jquery - javascript

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);
}
});

Related

How to prevent checkbox being checked from label click if it is indeterminate?

How would I stop a click event from a label associated to a checkbox if the checkbox is indeterminate?
I have attempted the following, but to no avail:
el.parent().find('.arena-custom-label').click(function ( event ) {
if (el.is(':indeterminate')) {
event.preventDefault();
el.attr('indeterminate', false);
el.removeClass('indeterminate');
dataGrid.find('.ag.gr:checked').trigger('click');
} else {
el.change(function () {
if (el.is(':checked')) {
dataGrid.find('tbody .ag.gr:not(:checked)').trigger('click');
} else {
dataGrid.find('tbody .ag.gr:checked').trigger('click');
}
});
}
});
el being the checkbox itself.
The goal is while this check box is indeterminate, upon the associated label click all I want it to do is go out of indeterminate and to unchecked. Then I will trigger all checked checkboxes in a table to go unchecked as well.
The problem is that when I click the indeterminate checkbox label, it causes it to go checked resulting in all unchecked checkboxes to go checked. The opposite of what I want.
indeterminate is a prop, not an attribute so you should use jquery.prop to update:
el.parent().find('.arena-custom-label').click(function ( event ) {
if (el.is(':indeterminate')) {
event.preventDefault();
el.prop('indeterminate', false);
el.removeClass('indeterminate');
dataGrid.find('.ag.gr:checked').trigger('click');
} else {
el.change(function () {
if (el.is(':checked')) {
dataGrid.find('tbody .ag.gr:not(:checked)').trigger('click');
} else {
dataGrid.find('tbody .ag.gr:checked').trigger('click');
}
});
}
});
See here and here for explanations.
Here is a fiddle with a vanilla JS demo.

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/

Check / Uncheck Input Boxes with Jquery [duplicate]

This question already has answers here:
Setting "checked" for a checkbox with jQuery
(43 answers)
Closed 8 years ago.
I've been looking through posts trying to find the answer, but haven't had any luck, so hoping someone can point me in the right direction.
When I use the following code, it checks all the input boxes and it unchecks them. However, if I click the check all again, it doesn't check them all. Why is that?
JQuery
$('document').ready( function() {
$('.check_boxes').click( function() {
if ( $(':checkbox').attr('checked')) {
$(':checkbox').attr('checked', false);
} else {
$(':checkbox').attr('checked', true);
}
});
});
HTML
<input type="checkbox" class="check_boxes" id="check_all" />
Try this:
js
$('document').ready( function() {
$('.check_boxes').click( function() {
if ( $('input:checkbox').prop('checked')) {
$('input:checkbox').prop('checked', true);
} else {
$('input:checkbox').prop('checked', false);
}
});
});
fiddle
Actually once you click on the checkbox, the first if is always true. Hence all checkeboxes get unchecked (including the one you clicked).
I assume you wanted this behavior:
http://jsfiddle.net/vhLMN/18/
$('document').ready( function() {
$('.check_boxes').click( function() {
if ( !this.checked ) {
$('.flip_us :checkbox').attr('checked', false);
} else {
$('.flip_us :checkbox').attr('checked', true);
};
});
});
BTW. There is no label attribute on inputs. You should fix this unless you are using some framework that uses it to create actual label tag.
i think you need this simple code:
$('document').ready( function() {
$('.check_boxes').click( function() {
if ( $(':checkbox').prop('checked')) {
$(':checkbox').prop('checked', true);
} else {
$(':checkbox').prop('checked', false);
}
});
});

jquery removeClass doesn't seem to work

While firstli.hasClass('selected') does work and retrieves the correct element. The removeClass function doesn't seem to remove to the class. When an element is unchecked I would like the first li to be unchecked as well.
Here is the jfiddle (the code is at the bottom)
Note: I want "Select All" to become unchecked when you uncheck one of the other options.
var firstli = $('.dropdown-menu.inner li').first();
firstli.click(function(event) {
if (!firstli.hasClass('selected')) {
$('.selectpicker').selectpicker('selectAll');
}
else {
$('.selectpicker').selectpicker('deselectAll');
}
return false;
});
var alllis = $('.dropdown-menu.inner li:not(:first-child)');
alllis.click(function(event) {
if ($(this).hasClass('selected')) {
alert(firstli.hasClass('selected')); //true
firstli.removeClass('selected');
}
});
Your problem is with setSelected() rechecking the Select All option. To fix this, I changed that function to the following:
setSelected: function (c, d) {
if (d) {
this.$menu.find("li").eq(c).addClass("selected")
} else {
this.$menu.find("li").eq(c).removeClass("selected")
this.$menu.find("li:first-child").removeClass("selected")
}
}
Basically, if it has to remove the selected class, you know they're not all checked. This works.
http://jsfiddle.net/eC8hF/30/

Checkbox change function does not work except clicking on it

I have written a function for a hdcheck checkbox.
$('#hdcheck').change(function () {
if($(this).is(':checked')) {
alert("It is Checked");
}
else {
alert("It is Unchecked");
}
});
It works find when I check or uncheck the checkbox but I have made a function that problematically make this checkbox checked or unchecked.
Here is the function on checkbox chk_1:
$('#chk_1').change(function () {
if($(this).is(':checked')) {
$('#hdcheck').prop("checked", true);
}
else {
$('#hdcheck').prop("checked", false);
}
});
This function works fine on making the first checkbox (hdcheck) checked or unchecked but it does not pop ups the alert message. Mean the function $('#hdcheck').change(function()
does not work.
As you are changing the property programmatically, you should trigger the change event, this is the minified version of your code + a change trigger.
$('#chk_1').change(function() {
$('#hdcheck').prop("checked", this.checked).change();
});
This is not a bug, this is an expected behavior.

Categories