Function not called for first click on checkbox - javascript

On checking a checkbox, I need to call a function. The first time I check the checkbox the function is not called whereas if I check it again, the function is successfully called. Please help me solve this issue. Here I have showed the part of my HTML and the function.
<input type="checkbox" id="checkThen" onchange="LoadContactDetails()">
function LoadContactDetails() {
$("#checkThen").change(function () {
if ($(this).is(":checked")) {
// ..........
}
else {
// ..........
}
});
}

If you want to attach inline event handler use ,
<input type="checkbox" id="checkThen" onchange="LoadContactDetails(this)" />
function LoadContactDetails(element) {
alert(element.checked);
}
DEMO
OR
If you want to use jQuery event handler use,
<input type="checkbox" id="checkThen" />
$(function() {
$("#checkThen").change(function () {
if (this.checked) {
// checked
}
else {
// unchecked
}
});
});
DEMO

You just bind the change event first time you clicked.
Remove the onchange attribute, then just bind the change event at the dom ready callback.
html:
<input type="checkbox" id="checkThen">
js:
$(function() {
$("#checkThen").change(function () {
if ($(this).is(":checked")) {
..........
}
else {
..........
}
});
});

$(document).ready(function(){
$("#checkThen").change(function () {
if ($(this).is(":checked")) {
..........
}
else {
..........
}
});
});

Remove the onchange attribute in function LoadContactDetails().
html:
<input type="checkbox" id="checkThen" onchange="LoadContactDetails()">
js:
function LoadContactDetails() {
if ($('#checkThen').is(":checked")) {
alert('checked');
}
else {
alert('Not-checked');
}
}
Demo
**Or**
You just bind the change event first time you clicked.
Remove the onchange attribute, then just bind the change event at the dom ready callback.
Html:
<input type="checkbox" id="checkThen">
.js:
$(function() {
$("#checkThen").change(function () {
if ($(this).is(":checked")) {
alert('checked');
}
else {
alert('Not checked');
}
});
});
Demo
Hope it should helpful for you.

In the first click you are binding an event to the checkbox. And from 2nd click onwards the callback function gets fired, and a new event binding will also happen. You can make it work by simply changing the code as follows,
HTML
<input type="checkbox" id="checkThen" >
Javascript
$(document).ready(function(){
$("#checkThen").change(function () {
if (this.checked) {
// checked
}
else {
// unchecked
}
});
});
Please follow this article on getting an idea about callback functions

Try using "Click" instead of "change. It might work.

Here you bind change event every time when function LoadContactDetails() call.
(It's not correct way)
You can just call your code directly inside your function.
function LoadContactDetails() {
if ($('#checkThen').is(":checked")) {
alert('checked');
} else {
alert('Not-checked');
}
}
Working Fiddle

i tried all the solutions given here but it did not work for me Finally, I found an easy way to solve this problem.I hope this will helpful for you also.
function LoadContactDetails() {
$("#checkThen").change(function () {
if ($(this).is(":checked")) {
alert('hello')
}
else {
alert('something wronge')
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" id="checkThen" onMouseDown="LoadContactDetails()"/>

Related

.is(":checked") doesn't work in jQuery

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

Checkbox on change is not firing

I got a check box on the html page as:
<input type="checkbox" id="chk-info" name="chk-info" />
when I try to write an on change event and run, it's not getting fired. Instead if, I place an alert message before the function it is firing fine.
alert('blah');
var sth = function(){
function m(){
$("input[type='checkbox']").click(function (e) {
if ($(this).is(':checked')) {
alert("true");
} else {
alert("false");
}
});
}
return{ m:m};
};
I have tried using the id selector as well, but with not much luck.
Can anyone help me in pointing where the issue is?
EDIT: When I place the check box checked function outside the above function it works well with 'onchange' event attached on the <input> tag
Put the onclick event of the checkbox on page load.
$(document).ready(function () {
$("input[type='checkbox']").click(function (e) {
if ($(this).is(':checked')) {
alert("true");
} else {
alert("false");
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="checkbox" id="chk-info" name="chk-info" />
<label for="chk-info">label</label>
$(document).ready(function () {
$("input[type='checkbox']").click(function (e) {
if ($(this).is(':checked')) {
$(this).val("true");
} else {
$(this).val("false");
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="checkbox" id="chk-info" name="chk-info" />
<label for="chk-info">label</label>

Checkbox fire a function if checked and a different function if not checked

Hi i have got a checkbox and when i click it and check the box a function runs, which works just how i want it to.. now i want to run a DIFFERENT function if it is checked off but it is just running the same function everytime.
<input type="checkbox" class="no-custom" onclick="CheckBox()">
function CheckBox() {
$("#emailMain").css({"display": "none"});
$("#emailSame").css({"display": "inline"});
var Mainemail = Customer().email['#text']();
Contact().email = Mainemail;
EmailHolder(Mainemail);
}
Any ideas in the best way to sort this?
Firstly, if you've included jQuery in your page you should use it to attach your events as its a better separation of concerns. You can then use the checked property of the element to determine which function to call:
<input type="checkbox" class="no-custom" />
$('.no-custom').change(function() {
if (this.checked) {
// do something...
}
else {
// do something else...
}
});
Add an ID to the checkbox:
<input type="checkbox" id="the-checkbox" class="no-custom" onclick="CheckBox()">
Then add an event listener for when it changes:
$(function() {
$('#the-checkbox').change(function() {
if($(this).is(':checked')) {
oneFunction();
}
else {
anotherFunction();
}
});
function oneFunction() {
}
function anotherFunction() {
}
});
You can easily check if the checkbox is checked using jQuery is.
<input type="checkbox" class="no-custom" onclick="CheckBox(this)">
function CheckBox(cb) {
if ($(cb).is(":checked")) {
alert("Checked");
CheckedFunction();
} else {
alert("Unchecked");
UncheckedFunction
}
}

Jquery is checked doesn't get trigger

http://jsfiddle.net/1uvL7tcm/
$(document).ready(function () {
if ($('#plainText').is(':checked')) {
alert('checked');
}
});
What's wrong with my code? the alert doesn't get trigger.
Try http://jsfiddle.net/1uvL7tcm/3/
You need to bind to all checkbox elements change event as such:
$("input[type=checkbox]").change(function(){
if ($(this).is(":checked")){
alert('checked');
}
});
The code you have runs once, when the page loads. If your checkbox is checked by default, you will get the alert. I modified your jsFiddle to have it checked by default and you get the alert: http://jsfiddle.net/1uvL7tcm/2/
If what you're looking for is to have this code triggered anytime a checkbox is changed, you will have to add a change handler:
$('input[name="checkbox"]').change(function() {
if ($(this).is(':checked')) {
alert('checked');
}
});
In your case the checked condition is only checked once when the dom ready event is fired... what you need is to check the condition whenever the checked state is changed... for that you need to write a handler for the change event using change() method from jQuery.
Since you want the same handler to be fired for all checkboxes, you can use a common attribute among all the three checkboxes which is its name as a selector. So
$(document).ready(function () {
$('input[name="checkbox"]').change(function () {
if (this.checked) {
alert('checked: ' + this.value);
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox" id="plainText" value="status">
<label for="plainText">Status</label>
<input type="checkbox" name="checkbox" id="image" value="Images">
<label for="image">Images</label>
<input type="checkbox" name="checkbox" id="video" value="Video">
<label for="video">Video</label>
Try This..
$('#plainText').on('click',function(){
if ($('#plainText').is(':checked')) {
alert('checked');
}
});
Try this...
$(document).ready(function(){
$("input[type=checkbox]").change(function(){
if ($("#plainText").is(":checked")){
alert('checked');
}
});
});

Radio Button Check

I am trying to check if a radio box is checked using JavaScript, but I can't seem to figure it out properly.
This is the HTML code:
<input type="radio" name="status" id="employed_yes" value="yes">
<input type="radio" name="status" id="employed_no" value="no">
I have tried using jQuery as follows:
$(document).ready(function() {
if($('#employed_yes').is(':checked')) {
// do something
}
});
Also, I tried using pure Javascript by getting the element and check its 'checked' attribute, but it didn't work.
I look forward to your insight!
Thank you!
Use onchange
$('input[type="radio"]').on('change',function(){
if($('#employed_yes').is(':checked')) {
alert("yes");
}
});
DEMO
Try to check using name of the radio buttons like
if($('input[name="status"]').val() != "") {
// do something
} else {
alert("Select an Status");
}
Your solution doesn't work because when the page loads the checkbox's default state is unchecked, which is when the jQuery code runs.
You need to listen for the change event on the checkbox like so:
$(document).ready(function() {
$("#employed_yes").change(function() {
if(this.checked) {
document.write("checked");
}
});
});
Demo: http://jsfiddle.net/7CduY/
Try this. This will alert Hi on document ready if the any radio button is checked. If you want to check on specific event then you can bind on any event to check same.
$(document).ready(function() {
if($('input[type=radio]').is(':checked')) {
alert("Hi");
}
});
if($('input:radio:checked').text("yes") {
// do something
}
Got the idea from the jQuery forum. http://forum.jquery.com/topic/how-to-check-whether-all-radio-buttons-have-been-been-selected
Dude, I think you Wanted, whether radio button is checked or not, this what i understand from your question
If so here it is
$(document).ready(function() {
$('input[type="radio"]').on('change',function(){
if($('[name=status]:checked').length) {
alert("checked");
}
});
});
FIDDLE DEMO
Pure JS:
<input type = "button" value = "What?" name = "wic" onclick = "whatischecked(this.name);" />
Event onClick:
function whatischecked(name) {
var
emp = document.getElementById("employed_yes").checked
nonemp = document.getElementById("employed_no").checked
if (emp) {
alert("Employed");
};
if (nonemp) {
alert("Non-Employed");
};
if ((emp == false) & (nonemp == false))
{
alert("nothing checked")
};
}

Categories