Get state of checkbox using javascript - javascript

I'm trying to write a javascript with jquery which should be able to pick out and use information on if a checkbox is checked or not. This should happen every time the checkbox(has id 'edit-toggle-me') is clicked. I've written a test function for this with some alert() in it to see if I've succeeded or not.
(function ($) {
"use strict";
$(document).ready(function () {
$('#edit-toggle-me').click(function(){
if ($('#edit-toggle-me').checked()) {
alert('Yup!');
}
else {
alert('Nup!');
}
});
});
})(jQuery);
It perform neither of the alerts so I'm guessing it crashes at $('#edit-toggle-me').checked(). I don't know why though.
I've also tried this:
(function ($) {
$(document).ready(function () {
$('#edit-toggle-me').click(function(){
var elementy = document.getElementById('edit-toggle-me');
var check = elementy.value;
alert(check);
if(elementy.checked()) {
alert('yup');
}
});
});
})(jQuery);
The first alert works, but neither or the last two 'yup' or 'nup'.
And then I also tried this:
(function ($) {
$(document).ready(function () {
$('#edit-toggle-me').click(function(){
var element2 = document.getElementById('edit-toggle-me');
var check = element2.value;
alert(check);
});
});
})(jQuery);
This always return 1. Which I don't understand why either.
Grateful for any hints.

Use .is(':checked'). You can find the documentation HERE.
JSFIDDLE

There is no such method as .checked() in jQuery or in the DOM API. There is simply a .checked property on the element that is true if the element is checked, false otherwise. Try this:
(function ($) {
"use strict";
$(document).ready(function () {
$('#edit-toggle-me').click(function(){
alert( this.checked ? ":)" : ":(" );
});
});
})(jQuery);
See demo: http://jsfiddle.net/scZ3X/

$(function(){
$('#edit-toggle-me').on('change', function(){
if($(this).is(':checked')) {
alert('checked');
}
else {
alert('unchecked');
}
});
});
You should have to use �change� event instead click. Because In some cases click event is not good to use in check box and radio buttons.
Example 1:
If you have a radio button have click event bind. In case your radio button is already true and you clicking in radio button. It�s not change radio button value, But your click event fire every time.
But in case if you use change event. Your event will fire only if your radio button value got change(If it�s already not checked or true)
Example 2:
If you have any label for any radio button or check box. In case you have click event bind in checkbox or radio button. On click of your label your check box or radio button value got change but your click event will not call.
In case of change event. It�ll work as expected on click of label related label too.

Try this:
$('#edit-toggle-me').is(':checked')

Related

How to call a function using checkbox in jQuery?

I have a checkbox and want to call a function when I check the checkbox and also disable that function when I uncheck the checkbox. How do I do it?
Note: By disable I mean, it should revert the process done by that function.
Update:
Is there any way to directly disable the function that I called? Since it contains many other click events inside it. So I don't wanna turn those off individually. I just wanna disable that function so that those click events automatically goes off.
$('#checkbox').change(function() {
if($(this).is(":checked")) {
// do something if checked
}
else{
// do something if not checked
}
});
Listen to the change event.
$('input#your-input-id').change(function() {
if(this.checked) {
// call the function
}
else {
// call "undo" function
}
});
$('input[type="checkbox"]').on('change', function() {
if(this.checked) {
// process if checked
} else {
// revert process here
}
// example to set variable:
var myvar = this.checked ? "It is checked" : "not checked";
});

Jquery: How to call a function on click

I have a check box called, On click of that check box I am calling a function below.
$('#checkbox-id').on('click', function(){
alert("clicked");
}).each(function(){this.checked = ace.settings.is('main-container', 'fixed')})
Same method I want to call from different function. First I need to check weather checkbox is checked or not after that I need to call function once checkbox is check for this I am using this code.
$(document).ready(function(){
if(document.getElementById('checkbox-id').checked){
$('#checkbox-id').click() // getting called but also unchecking checkbox it should not uncheck
}
});
This is working but it also unchecking checkbox which I don't want.
So How can I call that function without unchecking checkbox.
Here is JSFIDDLE to reproduce.
You can check If Check Box Is Checked Like :
$(document.body).on('change', '#chkID', function () {
if (this.checked) {
// CHECK BOX IS CHECKED
}
else {
// CHECK BOX IS NOT CHECKED
}
});
DEMO
Try declaring your function instead of using an anonymous function:
function handle_click() {
alert("clicked");
}
$('#checkbox-id').on('click', handle_click);
$(document).ready(function(){
if(document.getElementById('checkbox-id').checked){
handle_click();
}
});
you can use this ,this will fire the alert once the checkbox become checked
$('#checkbox-id').on('click', function () {
if ($(this).prop("checked") == true) {
alert("clicked");
}
});
Try trigger() instead:
$('#checkbox-id').trigger('click');
Only workaround not proper solution
$(document).ready(function(){
if(document.getElementById('checkbox-id').checked) {
$('#checkbox-id').click() // getting called but also unchecking checkbox should not uncheck
$('#checkbox-id').prop('checked', true);
}
});

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/

Have textbox recognize copied input from button

I'm very new at this and I tried to search, couldn't find answer.
I have several buttons that have a value assigned to them and when I click them, it copies text into another textbox with a submit button underneath that.
I'm having trouble having the textbox recognize that the value was input into the textbox to therefore enable the submit button.
Sample of what I have:
$("#buttonToCopy").click(function () {
$('#textBox').val("Value").html();
});
$('#textBox').on('input', function () {
if ($(this).val().length>0);
$('#submitBtn').removeAttr('disabled');
$('#submitBtn').removeClass('disabled');
});
Any help is really appreciated.
As can be read in this StackOverflow question, jQuery doesn't fire events when using the .val() method. This means that your code
$("#buttonToCopy").click(function () {
$('#textBox').val("Value").html();
});
will not fire "input", or "change" events. You could trigger the event yourself:
$("#buttonToCopy").click(function () {
$('#textBox').val("Value").html();
$('#textBox').trigger('input');
});
Alternatively, you could easily call the function to disable the button from the buttonToCopy as well:
$("#buttonToCopy").click(function () {
$('#textBox').val("Value").html();
EnableSubmitButton()
});
$('#textBox').on('input', function () {
EnableSubmitButton()
});
function EnableSubmitButton(){
if ($(this).val().length>0) {
$('#submitBtn').removeAttr('disabled');
$('#submitBtn').removeClass('disabled');
}
}

jQuery checkbox click shows input field - doesn't work

I use a jQuery function to show certain hidden text fields once you select something from a select box.
This works fine for select boxes but I can't get it to work for a checkbox.
Here is the stripped code I tried (in a nutshell) but it's not working: http://jsbin.com/uwane3/2/
Thanks for your help, I rarely use JS so my knowledge is small.
I have found 2 errors in your code:
your Checkbox has no value so you cant get more than an empty result form ".val()"
you have not bind a eventhandler to the checkbox.
http://jsbin.com/uwane3/3
$('#cf3_field_9').live('click', function(e){
if (e.target == $('#cf3_field_9')[0] && e.target.checked) {
alert('The following line could only work if the checkbox have a value.');
$.viewMapcf3_field_9[$(this).val()].show();
} else {
$.each($.viewMapcf3_field_9, function() { this.hide(); });
}
});
You have no events registered to your checkbox.
Register a click, or change handler like this:
$('#cf3_field_9').click(function(){
if ($(this).attr("checked")) {
$.viewMapcf3_field_9[$(this).val()].show();
} else {
$.each($.viewMapcf3_field_9, function() { this.hide(); });
}
});
http://api.jquery.com/category/events/

Categories