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
Related
I don't want to listen for the event of the switch being toggled, instead I want to use JavaScript to check it's current checked state.
<input type="checkbox" name="pushtoggle" state="true" data-role="none">
I have this simple JavaScript to check the checked value:
if ($('#pushtoggle').is(':checked')){ alert('checked'); } else { alert('not checked');}
No matter which state (on or off) the switch is set to I always get the alert that it is not checked.
I initialized the toggle switch using:
$("[name='pushtoggle']").bootstrapSwitch();
I also tried setting the checked attribute within the input tag. Nothing works to get me the correct state of the switch.
You don't have any element with id = pushtoggle but you're using an id selector.
Try with this
if ($('[name="pushtoggle"]').is(':checked')){
alert('checked');
}
else {
alert('not checked');
}
$("[name='pushtoggle']").bootstrapSwitch('state')
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.
}
});
I'm new to JQuery in general and I want to have a function activate when ANY checkbox on the page is checked or not. Then it should check what state the checkbox is "checked" or not.
I'm not sure how to do this as all the examples I'd seen require the name of the checkbox in order to work. I'd be fine if this was in Javascript aswell.
Anyone have any ideas?
$('input[type="checkbox"]') would select all checkboxes on your page.
The following would run a function when any of your checkboxes are changed, and when checked:
$('input[type="checkbox"]').change(function(){
if($(this).is(':checked')) {//do something}
})
Bind dynamically your checkboxes to change event, and check if they are checked, then do a function of your choice.
$(document).on("change", ".chkelement", function(){
if( $(this).is(":checked") )
{
//DO SOMETHING
}
});
I recommend use a container other than "document", as close as possible to where checkboxes will be, but you get the idea right?
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);
});
I have a page with a set of checkbox's, that I want to run a Javascript function on when there is a change (I have done something very similar with dropdown's - and that worked)
However with the checkbox's I have three problems:
my onChange event only runs "sometimes" (you have to change the focus between the different checkbox controls
when it does run it is returning the result of the previous checkbox (not the one just clicked on)
the jQuery always return the value true
Checkbox creation
<%= Html.CheckBox("sl-" + row.Id, value, new { onChange = "SuitabilityChecked("+row.Id+", "+key+")"})%>
Javascript
function SuitabilityChecked(providerId, parentRecordId) {
var params = {};
params.providerId = providerId;
params.parentRecordId = parentRecordId;
var value = $("#sl-" + providerId).val();
params.value = value;
$.getJSON("SuitabilityChecked", params, null);
};
Browsers are funny about radio buttons and check boxes and can delay the onchange until focus change. Try adding an onclick event to blur or call the change event directly.
Maybe something like this using jQuery Live (untested, off the top of my head):
$(':checkbox').live('click', function() { $(this).change(); });
What's happening:
Checkbox A clicked
Checkbox B clicked
Checkbox A has lost focus and fires onChange
Which makes it seem as if Checkbox B is returning the result of Checkbox A. If you were to press Tab after clicking Checkbox B in this scenario, you'd notice that its onChange would fire.