We Keep Coding

.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

PreventDefault not working for dynamic link

<a href="#" class="submit-form show-field" data-show-field="#Product" >View products</a>
This link is dynamically added to the dom, and I fire a jQuery function on click
$('body').on("click", 'a.show-field', function(e) {
if (!$(this).attr('data-show-field')) {
return;
}
$($(this).attr('data-show-field')).parent().show();
e.preventDefault();
});
The event fires fine, but page redirects. I cant understand what I've done wrong

You event is fired before you can prevent it.
$('body').on("click", 'a.show-field', function(e) {
e.preventDefault();
if (!$(this).attr('data-show-field')) {
return;
}
$($(this).attr('data-show-field')).parent().show();
/*e.preventDefault(); */
});

If the page redirects then I think your listener is not working well.
Here you are a plunker with a use case.
With and whithout document ready
I don´t know where you put your code, but if it's outside the "document ready" that listener never fires.
$('body').on("click", 'a.show-field', function(e) {
alert("First attemp is attached");
});
$(document).ready(function() {
$('body').on("click", 'a.show-field', function(e) {
alert("Second attemp is attached");
if (!$(this).attr('data-show-field')) {
return;
}
$($(this).attr('data-show-field')).parent().show();
e.preventDefault();
});
});
PD: sorry for my english

onclick function for input checkbox - check on page load and also on click

I have this code:
$('input.ShowResellerAccounts').on('click', function(){
if($(this).is(':checked')){
$('tbody#pages').hide();
} else {
$('tbody#pages').show();
}
});
which hides/shows a table tbody id on click.
how can i make this code run on page load as well as on click?

In the document.ready function you can trigger the click event like
$('input.ShowResellerAccounts').trigger('click');

Separate it into a function and bind in on load as well as on click:
function checkInput(){
if($(this).is(':checked')){
$('tbody#pages').hide();
} else {
$('tbody#pages').show();
}
});
$(document).ready(function() {
$('input.ShowResellerAccounts')
.on('click', checkInput) // bind to click
.each(checkInput); // call now
});

u can use $(document).ready :
$(document).ready(function(){
//put your code here
});

jQuery show not work

I am trying to show span but it doesn't work. This is the code that doesn't work:
<script>
$(document).ready(function() {
$('input[type="file"]').ajaxfileupload({
'onStart': function() {
//alert("myAlert");
$(this).siblings('span').show();
}
});
});
</script>
But the span will show when I put alert before it, like this:
<script>
$(document).ready(function() {
$('input[type="file"]').ajaxfileupload({
'onStart': function() {
alert("myAlert");
$(this).siblings('span').show();
}
});
});
</script>
Why is this happening? (I use the plugin: jquery.ajaxfileupload)
Edit:
This is my html code:
<input type="file"/><br/>
<h1>test1</h1>
<span style="display: none;">test3</span>
<h2>test2</h2>

The problem is that your code runs before the DOM structure has finished loading. That causes your script to attempt to change the styles of the span before it has access to the span, so it doesn't do anything at all. To fix this, place your code within a callback, like this:
$(function() {
$('input[type="file"]').ajaxfileupload({
'onStart': function() {
$(this).siblings('span').show();
}
});
});
That will make the code run only after everything has loaded, which will ensure that your script can actually access the element it needs to show. When working with the DOM (which is basically everytime you need to change any HTML element), you need to put your code in such callback function.

Try a direct reference to the span
<input type="file"/><br/>
<button>View Span</button>
<h1>test1</h1>
<span class="myspan" style="display: none;">test3</span>
<h2>test2</h2>
Then
<script>
$(document).ready(function() {
$('input[type="file"]').ajaxfileupload({
'onStart': function() {
$('.myspan').show();
}
});
});
</script>
This must work

Select all Forms in a div and prevent the default action

I want to Display part of my website in a layover. If the user has no javascript, the layover is displayed as a normal website.
I'm getting the Website with getController and my problem occures in handleLinksAndForm.
$("#Popup > a").click(function(e){
e.preventDefault();
getController($(this).attr("href").substr(1),element);
});
This works as intended. Whenever a click on a Anchor element in Popover div happens, the default action is prevented and the new website is loaded in the popover.
$("#Popup > form").each(function() {
alert(this.name);
});
$("#Popup > form").submit(function(e) {
alert("form");
e.preventDefault();
getPostController($(this).attr("action"),$(this).serialize(),element);
return false;
});
However, this part does not work. Neither the foreach part nor the .submit().
So my Question is: Whats my mistake? If I use $("form").each(function() {... all forms are recognized, but if I add the extra selector #Popup none is recognized.
Complete Code:
function getController(ctrl,element)
{
$.get('/service/controller/' + ctrl, function(data){
handleLinksAndForm(data,element)
})
}
function getPostController(ctrl,args,element)
{
$.post('/service/controller/' + ctrl,args, function(data) {
handleLinksAndForm(data,element)
});
}
function handleLinksAndForm(data,element)
{
element.html(data);
element.prepend("<div id=\"popupClose\">x</a>");
centerPopup();
$("#popupClose").click(function(){
disablePopup();
});
$("#Popup > a").click(function(e){
e.preventDefault();
getController($(this).attr("href").substr(1),element);
});
$("#Popup > form").each(function() {
alert(this.name);
});
$("#Popup > form").submit(function(e) {
alert("form");
e.preventDefault();
getPostController($(this).attr("action"),$(this).serialize(),element);
return false;
});
}

You didn't provided any html code. So hard to say if isn't here more problems for example if is really element form a child of #popup.
But first try to use:
return false;
instead:
e.preventDefault();
Also you can use:
$("#Popup form") instead $("#Popup > form") it is safer way.

I just tested with the code below and I was able to locate the child element.
$("form", "#Popup").submit(function(e) {
alert("form");
...
});
N.B. This syntax also calls .find() but is slightly easier on the eyes.

Found my mistake:
I got:
<table>
<form>
<tr><td>...</td></tr>
</form>
</table>
The right way is:
<form>
<table>
...
</table>
</form>