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

Multi checkbox requirement enable disable dropdown box using jquery

So first off I did search and I found this Enable/Disable a dropdownbox in jquery which got me on the right track. I'm new to jquery so when seeing other code I can adapt it to fit and work for me.
So what i'm asking is how do you make it check to see if two check boxes condition are true?
<script>
$(document).ready(function() {
$("#box1").click(function() {
if ($(this).is(":checked")) {
$("#tech1").prop("disabled", false);
} else {
$("#tech1").prop("disabled", true);
}
});
});
</script>
I want it to be if box1 and box2 are checked enable this box? I understand you can do it with an if statement, but I'm not sure where exactly it goes. Thanks in advance.
Would this work:
$("#box1").click(function() {
if ($(this).is(":checked")) &&
$("#box2").click(function() {
if ($(this).is(":checked"))
I doesn't work and I assume thats because that above creates two functions and not the if statement that I need.

Include both in the event handler, and check if both are checked
$(document).ready(function() {
var boxes = $("#box1, #box2");
boxes.on('change', function() {
var disabled = boxes.filter(':checked').length === boxes.length;
$("#tech1").prop("disabled", disabled);
});
});
FIDDLE

Consider box1 & box2 checkboxes defined with a css class boxes as below:
<input type="checkbox" id="box1" class="boxes" />
<input type="checkbox" id="box2" class="boxes" />
Now you can use box class as jquery selector to do your task
<script>
$(document).ready(function() {
$(".boxes").click(function(){
if($(".boxes:checked").size() == $(".boxes").size()){
$("#tech1").prop("disabled", false);
}else{
$("#tech1").prop("disabled", true);
}
);
});

Working With checkboxes in the web pages

I have group of checkboxes and that are compulsory to be applied but the situation is user can be able to check only one check box at a time. So, for this I have implemented something like this with the help of internet. No doubt it works fine when there are no checkbox checked by default. But suppose, one of the checkbox is checked true when page loads, then this does not works unitl I click on checkbox twice.
Here is what I am using::
So , Assuming I have set of 5 checkboxes, I set same class name for all the checkboxes and then
<input type="checkbox" class="myclass" onclick="Checkme(this.className);"/>
<input type="checkbox" class="myclass" onclick="Checkme(this.className);"/>
<input type="checkbox" class="myclass" onclick="Checkme(this.className);"/>
<input type="checkbox" class="myclass" onclick="Checkme(this.className);"/>
<input type="checkbox" class="myclass" onclick="Checkme(this.className);"/>
In View page I have declared::
function Checkme(class_Name) {
Check_OR_Uncheck(class_Name);
}
In Common js::
function Check_OR_Uncheck(class_Name) {
$("." + class_Name).click(function () {
if ($(this)[0].checked) {
$("." + class_Name).each(function () {
$(this)[0].checked = false;
});
$(this)[0].checked = true;
}
else {
$(this)[0].checked = false;
}
});
}
Please Help me to achieve this..

Keep your code in the document ready event. This will register the click event for "myclass".
$(".myclass").click(function () {
if ($(this)[0].checked) {
$(".myclass").each(function () {
$(this)[0].checked = false;
});
$(this)[0].checked = true;
} else {
$(this)[0].checked = false;
}
});
jsfiddle

You could use document ready handler and call method:
jsFiddle
$(function(){
$(':checkbox:checked').each(function(){
Checkme(this.className);
});
});

Try this
$(function(){
$('.myclass').click(function(){
var s=$(this).prop('checked');
if(s==true)
{
$('.myclass').prop('checked',false)
$(this).prop('checked',true)
}
});
});
Or
You simply can use
if(s==true)
{
$(this).siblings().prop('checked',false);
}
FIDDLE

Try this
$(function(){
$('input:checkbox').prop('checked', false)
$('input:checkbox').click(function(){
if($(this).is(':checked')){
$('input:checkbox').not(this).prop('checked', false);
}
});
})

Instead of implementing a group of check boxes that behave like a group of radio buttons, I suggest implementing a group of radio buttons that look like a group of check boxes:
input[type=radio] {content:url(mycheckbox.png)}
input[type=radio]:checked {content:url(mycheckbox-checked.png)}
This approach simplifies your implementation; you have two one-line CSS rules instead of a JS event handler function, event binding (on both document ready and the HTML element itself), not to mention a possible dependency on jQuery (if you choose to use it).
The catch to this approach is that it requires CSS3 support. For more info, check out this SO answer: https://stackoverflow.com/a/279510/2503516

JQuery - also trigger change on click away

I have a basic JQuery script that changes a few divs when you click - thus showing them - via toggle.
<script type="text/javascript">
$('#content_display').click(function() {
$(this).toggleClass('selected');
$('#content_display_selector_container').toggle();
});
</script>
However - to call the even you need to click only on the first main div with the ID of "content_display".
My question is this: how can I hide these changes using JQuery if the user also clicks on BODY - i.e. if you click away, the divs go back to their original hidden state?
Thanks for helping a JQuery clutz!

Something like this should work:
$('body').click(function(e) {
if (!$(e.target).is('#content_display')) {
$('#content_display').removeClass('selected');
$('content_display_selector_container').hide();
}
});

Hey - found a way to do this - does anyone think there's a better way?
Here's the result:
<script type="text/javascript">
var mousetrap = false;
$('body').click(function() {
if (mousetrap == false) {
$('#content_display').removeClass('selected');
$('#content_display_selector_container').hide();
}
});
$('#content_display').hover(function() {
mousetrap = true;
},function(){
mousetrap = false;
});
$('#content_display').click(function() {
$(this).toggleClass('selected');
$('#content_display_selector_container').toggle();
});
</script>

jquery click event ONLY when wrapped element clicked

I have the following html:
<ul class="treeList2">
<li class="topLevel marked checked"><div class="tlWrap clearfix"><input type="checkbox" checked="checked" class="checkbox"><strong>Level name here blah blah <span>(3)</span></strong></div></li>
...
<script type="text/javascript">
/*<![CDATA[*/
$(function(){
$('.treeList2 li.topLevel .tlWrap').click(function(){
alert(this);
});
});
/*]]>*/
</script>
The problem is that this fires when I click the checkbox (which i don't want). I Only want to alert(this) when the 'div' is clicked (I do this so that I can change the div background).
thanks

You can prevent the click event on the checkbox from bubbling up to the parent like this:
$('.checkbox').click(function(e){
e.stopPropagation();
});
You can try it here.
See http://api.jquery.com/event.stopPropagation/

check if the target is not input element and then only alert.
$(function(){
$('.treeList2 li.topLevel .tlWrap').click(function(e){
if (e.target.nodeName !== 'INPUT') {
alert(this);
}
});
});

Looking at it, you need to call the parent?
$('.treeList2 li.topLevel .tlWrap').parent().click( ...
Although if you want to change the parent div when the checkbox is clicked:
$('.treeList2 li.topLevel .tlWrap').click(function(){
$(this).parent().css('background-color','red');
});
[edit]
Sorry, I mis-read the html.
There's a 'not' function that you can exclude elements with:
$('.treeList2 li.topLevel .tlWrap').not('input').click( ...
This will fire when anything in the div is clicked on, except the checkbox.

You can check whether the element that triggered the event (e.target) has a class of tlWrap.
$(function(){
$('.treeList2 li.topLevel .tlWrap').click(function(e){
if($(e.target).hasClass("tlWrap")) {
alert(this);
}
});
});
See a working demo.