is there a way to do in javascript such that if I check a few checkboxes as a condition, one of the checkbox will be check. Currently here's my logic for the codes but it cant work.
$(document).ready( function a()
{
if ( $('#condition1' && $('#condition2').is(':checked'))
{
$('#checkbox1').attr('checked', true);
}
});
Also, is it possible to put a class in the checkbox to do the check function instead of id?
You script is executed on document ready. After the execution is won't react to any action you take. In order to accomplish what you want, you need to run the script every time a check box is clicked.
$(document).ready( function(){
$('input[type="checkbox"]').click(function(){
if ( $('#condition1').is(':checked') && $('#condition2').is(':checked')){
$('#checkbox1').prop('checked', true);
}else{
$('#checkbox1').prop('checked', false);
}
});
});
http://jsfiddle.net/CaZ7j
Your need to use a change handler
jQuery(function ($) {
var $checks = $('#condition1, #condition2').change(function () {
$('#checkbox1').prop('checked', $checks.is(':checked'));
})
});
Demo: Fiddle
Related
I'm new to jQuery and I need to check if the checkbox is checked. In other posts I saw that I need to use .is(":checked") to solve it, but somehow it doesn't work.
$('.neutral').on('click', function() {
var checkbox = $(this);
if (checkbox.is(":checked")) {
console.log('checked');
} else {
console.log('unchecked');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="neutral" />
In this code I have 2 problems and I don't know how to solve it.
When I'm using console.log('checked') outside of the if statement (after checkbox variable) and I click on the checkbox one time, console prints the result 2 times.
I don't know why this if statement doesn't working.
Thank you for your time and help.
checked happens after the change event,just replace click with change.
$('.neutral').on('change', function() {
var checkbox = $(this);
if (checkbox.is(":checked")) {
console.log('checked');
} else {
console.log('unchecked');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="neutral" />
I have seen your code, I think you should try
$(document).on("click",".neutral",function() {
// Write code here
});
Instead of your code, Replace this code to as i written
$('.neutral').on('click', function() {
// Code here
});
For more undesirability see here
$(document).ready(function() {
// This WILL work because we are listening on the 'document',
// for a click on an element with an ID of #test-element
$(document).on("click","#test-element",function() {
alert("click bound to document listening for #test-element");
});
// This will NOT work because there is no '#test-element' ... yet
$("#test-element").on("click",function() {
alert("click bound directly to #test-element");
});
// Create the dynamic element '#test-element'
$('body').append('<div id="test-element">Click mee</div>');
});
Visit these link that may help you more for your implementation
Statck over flow link
jsFiddle Link
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";
});
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);
}
});
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/
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')