How come the following code does not work. I prevent the default action on the event. Then I want to check the box anyway.
html
<input type="checkbox" class="checkbox" />
javsacript
$('.checkbox').click( function(e) {
e.preventDefault();
// some logic happens... now i may decide to check the box (in this case we want to check it for testing)
$('.checkbox').prop('checked',true);
});
You would think clicking the checkbox would still check the box.. but it doesnt. Check the fiddle to see what I mean.
http://jsfiddle.net/5KDH8/
I have also tried using the attr function without any luck.
You have to put the code that sets the "checked" property in a separate event loop:
setTimeout(function() { $('.checkbox').prop('checked', true); }, 1);
Either the browser or the library has to un-set the checkbox after the event handler returns, because it sets it in response to the click before the handler is invoked.
$('.checkbox').click( function(e) {
// do some logic that returns true or false
if (!mylogic) {
return false;
// returning false will prevent the checkbox to be checked.
}
});
Related
I have a checkbox on which i am trying to send an ajax request based on its position. It is true by default. I want to be able to click it, and get a dialog that asks me if I want to discard my changes,and this dialog depends on the fact that the checkbox is not yet false.
$("input[type='checkbox']").click(function(evt) {
evt.preventDefault();
alert(this.checked);
if(checkEdited()){
var result = confirm("Do you want to continue?");
}
});
function checkEdited(){
var checkbox = $("div.managerContent input[type='checkbox']");
if(!checkbox.checked){
return false;
}
else{
//check other stuff
}
}
And everytime, I am getting false in the alert. In the browser, when I click the checkbox the check goes away, i get the alert, and then the check comes back.. checkEdited() is also used in other places
Everywhere I look to find how to stop a checkbox change event and assign it a value later just tells me to use .click and e.prenventDeafult()
Any ideas? Thanks so much!
You should attempt to capture the event before the click is complete, you can do this with mousedown like so:
$("input[type='checkbox']").on('mousedown',function(evt) {
evt.preventDefault();
alert(this.checked);
});
Here is a demo with a working example of capturing it before it changes
JSFIDDLE DEMO
I have on one page many inputs, which have same class and dont have ID.
Attached to bind event of class selector, for returning focus if condition is true.
But when click in another input- focus not return.
Think then 'cause in another element work blur, but dont know how need solve this.
<input class="test" value="">
<input class="test" value="">
$(document).ready(function(){
if (condition) {
// return focus - not work
$(".test").blur(function(){
setTimeout(function() {
$(this).focus();
}, 100);
});
}
});
There are two problems here.
First, once the setTimeout function executes this is now the window object instead of one of the inputs. Store the reference to the original this as part of the blur handler.
Second, the condition check should be moved. As it sits now, you will effectively be forced to never leave an input box once you blur it because the blur handler has been attached and always re-focuses. I don't know what your condition is so I am going to place it in the setTimeout callback. It could also go before the setTimeout creation.
Here's a verbose demo fiddle of an assumed implementation. Below is a watered down example:
<input class="test" value="">
<input class="test" value="">
$(document).ready(function(){
// return focus - not work
$(".test").blur(function(){
var that = this;
setTimeout(function() {
if (condition) {
$(that).focus();
}
}, 100);
});
});
The condition should be in blur event, see this fiddle: http://jsfiddle.net/UudLV/1/
It returns focus to the last focused input if the inputs value is empty.
$(".test").blur(function() {
if($(this).val().length === 0) { //Your condition, can be anything
$(this).focus(); //Return focus
}
});
Return the focus to the last focused element has nothing to do with the selector. The on blur event passes the last focused element to the callback function as context, therefore, this will be the element.
Edit*
I'm not entirely sure this is what OP wants to do.
I have a javascript function that sets a variable everytime a checkbox is clicked:
function handleClick(cb) {
alert('entered function');
setTimeout(function () {
if (cb.checked ) {
$("#IsChecked").val('true');
}
else
$("#IsChecked").val('false');
alert('now my value is: '+ $("#IsChecked").val());
}, 0);
}
Heres my checkbox:
<input id="MyCheckBox" type="checkbox" value="true" onclick="handleClick(this);"
name="MyCheckBox" checked="checked">
This works great everytime the checkbox is checked. But now i need to know if the checkbox is checked when the user clicks a button and has never touched the checkbox before. So i do this:
$(document).ready(function () {
$("#IsChecked").val('default');
$('#btnCheck').click(function (e) {
var isComplete = $("#IsChecked").val();
if (isComplete == 'default') {
var cb = $('#MyCheckBox');
handleClick(cb);
alert('after handleClick ischecked is: ' + $("#IsChecked").val());
}
});
});
When i click my button and the checkbox is checked by default, i get these alerts in this order:
entered function
after handleClick ischecked is: default
now my value is: false
If i check the checkbox to toggle it, i get these alerts as expected:
entered function
now my value is: false
In my handleClick event, the setTimeout is there because of IE so i cant get rid of it. How can i check to see if a checkbox is checked without having to click the checkbox itself? Thanks
How can i check to see if a checkbox is checked without having to click the checkbox itself?
$('#MyCheckBox').prop('checked') will tell you anytime whether the checkbox is checked or not.
However if you not only want to test its status, but also execute your handleClick function, then note that the function expects a DOM element, not a jQuery object as argument.
If you pass a jQuery object to your function, then cb.checked will always evaluate to false, since jQuery objects don't have a checked property (only DOM elements have).
You'd have to change your function call to:
handleClick(cb.get(0));
to extract the DOM element from the jQuery object.
How can i check to see if a checkbox is checked without having to click
You can find out if checkbox is checked in javascript with click event by using val() method
$("#MyCheckBox").is(':checked')
If you want to check that checkbox is checked from the button click event.
$("#IsChecked").is(':checked'); //returns boolean
I am trying to test the status of a checkbox upon its click.
My problem is that it always reports as true as it reports the status after the change event has taken place and not before.
Is there anyway I can test before the change.
Current code using jQuery - the checkboxes all of class 'package':
$(".package").click(function(){
if($(this).is(":checked")){
alert($(this).attr("checked"));
}
});
This always returns true even if selecting a checkbox that is not currently checked.
EDIT : Ok seems there was some old js interfering with the process, after cleaning that up the click function did indeed work. Thanks all.
Using the onchange event on a checkbox is not cross-browser (hello IE! And yes, even with jQuery).
The following works:
$('.package').click(function() {
console.log(this.checked) // There is no need for jQuery here
})
Logs 'true' when you check the checkbox, and 'false' when you uncheck it.
And seriously, using $(this).attr('checked') or $(this).is(':checked') is just jQueryception for nothing.
You can use the change event instead, this way you are sure the previous checked state is always the oposite of what you read now
$(".package").change(function() {
alert($(this).attr("checked"));
});
The click event fires before the actual textbox change takes place, you need to subscribe to the change event:
$(".package").change(function(){
if($(this).is(":checked")){
alert($(this).attr("checked"));
}
});
Edit: Try querying the actual Javascript object itself, should work
$(".package").change(function(){
if(this.checked){
alert(this.checked);
}
});
im very new in javascript and jquery. I have this checkbox:
<label for="editable">Editable </label><input name="editable" type="checkbox" id="edita"/>
And this jquery action:
$('#slickbox1').toggle(400);
return false;
I want to execute that action when the checkbox is checked. Thanks!
You could try:
$('#edita').change(
function() {
if ($(this).is(':checked')) {
$('#slickbox1').toggle(400);
}
});
Although it's worth noting that running the toggle() method only when it's checked (assuming that it starts off un-checked) involves the user clicking the input once to show it, and then again to remove the check and again to re-check it so that it hides as a result of the toggle().
It might be worth considering:
$('#edita').change(
function() {
if ($(this).is(':checked')) {
// checked
$('#slickbox1').show(400);
}
else {
// un-checked
$('#slickbox1').hide(400);
}
});
Which shows $('#slickbox1') if the check-box is checked, and hides it if not,
Or:
$('#edita').change(
function() {
$('#slickbox1').toggle(400);
});
Which toggles the $('#slickbox1') between show() and hide() when the input is checked and un-checked.
Edited to address the question raised by DomingoSL (the OP) in comments:
...can you please make an edit to see the procedure if now the triger is not a checkbox but a button?
There are two changes that need to be made to accommodate this:
a button has no change event, so it would have to use click() instead, and
a button has no :checked (or equivalent) state, so the if/else becomes redundant.
One way of doing it, though, and I'm assuming your element names remain the same since you've posted no information to the contrary, is:
$('#edita').click(
function(){
$('#slickbox1').toggle(400);
});