Determining whenever user checks or unchecks a checkbox - javascript

Here is my Code:
$(document).ready(function () {
$("input[type='checkbox'][name='mycheckboxname']").change(function () {
if ($(this).checked == true) {
//do something (script 1)
}
else {
//do something else (script 2)
}
})
});
What i want to accomplish is to have 2 scripts running depening whenever user checks or unchecks a "mycheckboxname" checkbox.
Problem is that with above code i get always only script 2 to run so it looks like if $(this).checked is always false even if user checks the checkbox. Am I using $(this) the wrong way?

checked is a DOM property of the element, but $(this) returns a jQuery object.
You could just use the DOM property:
if (this.checked)
There's no reason to wrap this in a jQuery instance for that. I mean, you can:
if ($(this).prop("checked"))
...but it doesn't do anything useful on top of this.checked.
Side note:
if (someBoolean == true)
is just a roundabout way of writing
if (someBoolean)
I mean, why stop there? Why not
if ((someBoolean == true) == true)
or
if (((someBoolean == true) == true) == true)
or... ;-)

Use $(this).prop("checked") to get the true/false value of a <input type="checkbox">
Click the run code snippet below to see it work
$("input[type=checkbox]").change(function(event) {
if ($(this).prop("checked") === true) {
alert("ON");
}
else {
alert("OFF");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox">click it

Related

How to synchronise ExtJS "checkboxes" (buttons) with Javascript/JQuery?

I am currently trying to synchronize two checkboxes on a page.
I need the checkboxes to be synchronized - to this end, I'm using a Tampermonkey userscript to pick up when one of them is clicked. However, I'm at a loss as to how to do it.
I believe they are not actually checkboxes, but ExtJS buttons that resemble checkboxes. I can't check whether they're checked with JQuery because of this: the checked value is appended to a class once the JS behind the button has run.
I have tried preventDefault and stopPropagation, but either I'm using it wrong or not understanding its' usage.
I'm not quite clever enough to just call the JS behind the box instead of an onclick event. Otherwise, that would solve my issue.
This is my code:
//Variables - "inputEl" is the actual button.
var srcFFR = "checkbox-1097";
var destFFR = "checkbox-1134";
var srcFFRb = "checkbox-1097-inputEl";
var destFFRb = "checkbox-1134-inputEl";
//This checks if they're synchronised on page load and syncs them with no user intervention.
var srcChk = document.getElementById(srcFFR).classList.contains('x-form-cb-checked');
var destChk = document.getElementById(destFFR).classList.contains('x-form-cb-checked');
if (srcChk == true || destChk == false) {
document.getElementById(destFFRb).click();
} else if (destChk == true || srcChk == false) {
document.getElementById(srcFFRb).click();
}
//This is where it listens for the click and attempts to synchronize the buttons.
$(document.getElementById(srcFFRb)).on('click', function(e) {
e.preventDefault();
if (document.getElementById(srcFFR).classList == document.getElementById(destFFR).classList) {
return false;
} else {
document.getElementById(destFFRb).click();
}
});
$(document.getElementById(destFFRb)).on('click', function(e) {
e.preventDefault();
if (document.getElementById(srcFFR).classList == document.getElementById(destFFR).classList) {
return false;
} else {
document.getElementById(srcFFRb).click();
}
});
I'm at a bit of a loss...any help would be greatly appreciated.
Figured it out - I was comparing class lists without singling out what I wanted to actually match.
My solution:
$(document.getElementById(srcFFRb)).on('click', function(){
if (document.getElementById(srcFFR).classList.contains('x-form-cb-checked')
== document.getElementById(destFFR).classList.contains('x-form-cb-checked')) {
return false;}
else {
document.getElementById(destFFRb).click();;
}});
$(document.getElementById(destFFRb)).on('click', function(){
if (document.getElementById(srcFFR).classList.contains('x-form-cb-checked')
== document.getElementById(destFFR).classList.contains('x-form-cb-checked')) {
return false;}
else {
document.getElementById(srcFFRb).click();;
}});

Checkbox manipulation with javascript/jquery

Hello I have a problem with checkboxes in my app.
I want to set value of layer visibility to false when other layer visibility is true and also set checkbox value to checked when visibility of layer is true. I have problem with .click function - console throws me typeError checkbox[i].click is not a function.
var changeLayer = function() {
if (layers[0].M.visible == true) {
layers[1].M.visible == false
} else if (layers[0].M.visible == false) {
layers[1].M.visible == true
}
if (layers[1].M.visible == true) {
layers[0].M.visible == false
} else if (layers[1].M.visible == false) {
layers[0].M.visible == true
}
}
var checkbox = $('.layer');
for (i = 0; i < checkbox.length; i++) {
checkbox[i].click(changeLayer);
//$(checkbox[i]).on('click', changeLayer)
}
Here is image of layer switcher where after click on first layer, second one should hide and uncheck the box.
I know that is maybe silly question, but I couldn't find solution. I hope you can help me.
Your code looks fine, but you could simplify it quite a bit. The following will bind the same event to all elements with the class 'layer'.
$('.layer').click(changeLayer);
We'll probably need some more context to provide better solutions. As an FYI .click(someHandler) is just a shortcut for .on('click', someHandler), they are the same.

jQuery - Enable/Disable a button following checkboxes state

I'm using ASP.NET MVC 4 to develop a web app. I have a page which contains a submit button which should be enabled only if one of my two checkboxes (or both of them) is (are) enabled. The thing is, I'm trying to add an "or" operator in the following script but it does not give me what I want. So, here's my script :
The jQuery sample
And this is the part I'd like to improve :
$(document).ready(function() {
the_terms = $("#the-terms");
the_terms2 = $("#the-terms2");
the_terms.click(function() {
if ($(this).is(":checked")){
$("#submitBtn").removeAttr("disabled");
} else {
$("#submitBtn").attr("disabled", "disabled");
}
});
});
And I can't find a way to tell my document "Okay, if one of these 2 checkboxes (or both of them) is (are) checked, we can press on the button. If not, don't allow it".
Any idea guys?
It can be done with:
Fiddle
$('.checkbox').change(function(){
$('#submitBtn').prop('disabled', !$('.checkbox:checked').length > 0)
});
Note:
This find the checkboxes by class name checkbox so it will work with two checkboxes, whereas your original code is looking at a single checkbox via its ID.
Use the change event not click.
Simply use
$(".checkbox").click(function() {
$("#submitBtn").prop("disabled", !$('.checkbox:checked').length);
});
DEMO
$(document).ready(function() {
the_terms = $("#the-terms");
the_terms2 = $("#the-terms2");
$('.checkbox').change(function(){
$("#submitBtn").prop("disabled", !(the_terms.is(":checked") || the_terms2.is(":checked")));
});
});
// Make a function to be called on onload or on click
function checkTerm() {
jQuery('input[type="submit"]').attr('disabled',!jQuery('input.term:checked').length > 0 ) ;
}
// Call the function on load
$(document).ready(checkTerm) ;
// And call it on check change
jQuery(document).on('change','input.term',checkTerm) ;
Try below modified script , please check if it works as you want.
$(document).ready(function() {
the_terms = $("#the-terms");
the_terms2 = $("#the-terms2");
if(the_terms.is(":checked") || the_terms2.is(":checked"))
{
$("#submitBtn").removeAttr("disabled");
}
else
{
$("#submitBtn").attr("disabled", "disabled");
}
the_terms.click(function() {
if ($(this).is(":checked") || the_terms2.is(":checked")){
$("#submitBtn").removeAttr("disabled");
} else {
$("#submitBtn").attr("disabled", "disabled");
}
});
the_terms2.click(function() {
if ($(this).is(":checked") || the_terms.is(":checked") ){
$("#submitBtn").removeAttr("disabled");
} else {
$("#submitBtn").attr("disabled", "disabled");
}
});
});

javascript run function if everything is checked, filled, selected

I have a problem with javscript. I was wonder is it possible to create something like this in javascript:
<script>
function all_is_filled(){
if($('input[type=checkbox]').checked && document.getElementById('text_field').value!="" )
{
//do something...
}
}
</script>
So when someone check checkbox and fill text_field then this do something...Is there a way to do it?
This will work:
function all_is_filled() {
if ($('input[type=checkbox]').prop('checked') == true && $('#text_field').value != "") {
//do something...
}
};
$('#myform').on('change', function () {
all_is_filled()
});
I added a listen function to call all_is_filled() on change, but you can also put it onsubmit.
Simple demo HERE

Incorrect array value

I have an array (spliced to size 2) that keeps track of what user click (first, last). first and last elements are unique.
I am trying to load content based on what user clicked. The weird thing that is happening is that I don't see the updated array unless I do 2 console.logs. If 1 log is done the array doesn't get updated. I'm guessing this has something to do with array execution/manipulation time.
The way I debug is to a click handler to document and click to see the array value. Any suggestions or tips?
I never had this issue before. Thanks.
var clicksInfo = [];
$('#a, #b, #c').on('click', function(e){
// array: add, splice
if(jQuery.inArray($(this).attr('id'), clicksInfo) == -1){
clicksInfo.push($(this).attr('id'));
if(clicksInfo.length == 2){
// might do something
}else if(clicksInfo.length == 3){
clicksInfo.splice(0,1);
}
}else{
clicksInfo.splice(0,1);
clicksInfo.push($(this).attr('id'));
}
if($(this).attr('id') == 'a'){
// do stuff.
}else if($(this).attr('id') == 'b'){
// do stuff.
}else if($(this).attr('id') == 'c'){
// do stuff.
}
});
$(document).on('click', function(){
console.log('clicksInfo', clicksInfo);
// console.log('clicksInfo', clicksInfo);
});
Strings are strings, arrays are arrays, even in a console.log, so when doing :
console.log('clicksInfo', clicksInfo);
thats a string, a comma, and then an array ?
try doing:
console.log('clicksInfo : '+ clicksInfo);
to show the string representation, or to show the array as an object, don't mix it with other strangeness:
console.log(clicksInfo);
The problem you are facing is that events that occur are not guaranteed to execute in a specific order. Either click handler could be executed first, though in most browsers your handler for #a, #b, #c would be executed first.
While you could try to use setTimeout to wait long enough to synchronize your data, your code is quite likely to break.
If you want to handle a click in both cases, my recommendation would be to remove the handler for #a, #b, and #c. Use the document click handler only, pass in the event declaration, and then check the ID of the clicked element in your handler to invoke the first code. You are then guaranteed to have updated data before your second block of code runs. Something like this:
var clicksInfo = [];
$(document).on('click', function(e){
if (e.target.id === "a" || e.target.id === "b" || e.target.id === "c") {
// array: add, splice
if (jQuery.inArray(e.target.id, clicksInfo) == -1){
clicksInfo.push(e.target.id);
if(clicksInfo.length == 2){
// might do something
} else if(clicksInfo.length == 3){
clicksInfo.splice(0,1);
}
} else {
clicksInfo.splice(0,1);
clicksInfo.push(e.target.id);
}
if(e.target.id === 'a'){
// do stuff.
}else if(e.target.id === 'b'){
// do stuff.
}else if(e.target.id === 'c'){
// do stuff.
}
}
console.log('clicksInfo', clicksInfo);
});
JSFiddle here.

Categories