0

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.

  1. 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.

  2. I don't know why this if statement doesn't working.

Thank you for your time and help.

Shiladitya
  • 12,003
  • 15
  • 25
  • 38
HELPME
  • 714
  • 14
  • 35
  • 3
    I placed your code in an executable snippet where it appears to work fine. Could you please edit your code to show more of your relevant code, specifically where the event is attached. – Rory McCrossan Nov 28 '17 at 11:23
  • 1
    works fine on my browser Chrome 62 – N. Ivanov Nov 28 '17 at 11:24
  • 1
    It's working fine. So what's your problem. – Alive to die - Anant Nov 28 '17 at 11:24
  • `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.` -> if you have two `console.log()` then obviously two time output will shown. So what's the problem? – Alive to die - Anant Nov 28 '17 at 11:25
  • try preventDefault after click event – teju c Nov 28 '17 at 11:25
  • 1
    your code works perfectly fine for me , may be it not working for you because the DOM is not yet loaded when you bind the event listener. Try putting this code inside $(document).ready – Nirbhay Jha Nov 28 '17 at 11:27
  • I tried adding log outside of the if block its printing only once when I check the checkbox – teju c Nov 28 '17 at 11:28
  • Its working fine. In which browser are you testing? link: http://jsonwrapper.com/?utm_source=stackoverflow?utm_medium=tags?utm_campaign=queries – Ajay Thakur Nov 28 '17 at 11:28
  • Add `console.log($(".neutral").length)` directly before your `.click` line. If it's zero, then your check box doesn't exist yet and you need to either ensure it's in `$(document).ready` or use event delegation: https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – freedomn-m Nov 28 '17 at 11:36
  • I've no idea how this code works fine for you all, but it's working bad for me. I was trying to add `document.ready()` at the top of the code - still doesn't work. @freedomn-m the length of a class is 1, so it exists. – HELPME Nov 28 '17 at 11:38

2 Answers2

1

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" />
Yuri
  • 2,820
  • 4
  • 28
  • 40
-1

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

Mohd Aman
  • 224
  • 1
  • 3
  • 13
  • https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – freedomn-m Nov 28 '17 at 11:36
  • `$(document).on("click",".neutral",function() {` is only good when chebox created dynamically.Otherwise it's not a good practice to do that. Also if check-box have a static parent then try to use that static parent instead of `$(documnet).on(` – Alive to die - Anant Nov 28 '17 at 11:38