checking to see if Checkbox is checked is being skipped during execution

Question

I've been racking my brain around this for hours and haven't gotten anywhere. I have a simple form that I will be submitting to a database, after validation and vetting of course.

However, I'm hung up with retrieving the state of the checkbox that I am using. My Code returns all values except for the checkbox and is almost like it is skipping the retrieval of the Checkbox state because the alerts after the variable declaration because the alerts with the other values fire and show.

However the checked property isn't returning anything. I've searched and found countless ways of doing this and I felt like I have tried all of them. Below is just a few ways I've tried. Can anyone see what I am doing wrong???

$(function() {
  $('#submit').on('click', function() {
    var studId = $('input[name="Selected"]:checked').val();
    var classId = $('#ClassSelection').find(":selected").val();
    var classCode = $('input[name="Code"]').val();
    //var isOnline=$("input[type='checkbox']").val();
    //var isOnline=$("input[name='isOnline']").prop('checked');
    //var isOnline=$("input[name='isOnline']").is('checked');
    var isOnline = $("input[name='isOnline']").val();
    alert(studId);
    alert(classId);
    alert(classCode);
    alert(isOnline);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="isOnline" class="form-control">
<input type="button" class="btn btn-primary" id="submit" value="Submit">

`var isOnline=$("input[name='isOnline']").prop('checked');` - This one (one of your commented lines) should work. What is the result when you use this? Can you include the submit button in your code as well? If it's a true submit, you don't seem to be preventing a refresh. — Tyler Roper, Sep 18 '18 at 04:22
I added the Button element to the HTML Code. It seems like it skips just like the rest. It doesn't return anything nor does it alert. it just skips and alerts the other values. — Raining_Crumbs, Sep 18 '18 at 04:26
Unfortunately your question doesn't seem to replicate the issue. If you uncomment out the line I mentioned above and click the `Submit` button, you'll see it correctly alerts `true` or `false` based on the checkbox state. [**Example**](http://jsfiddle.net/nj567hua/2/) — Tyler Roper, Sep 18 '18 at 04:28
by commenting out all the other lines of code except for the ones you mentioned it alerts but doesn't return true or false. It raises 3 alerts, one undefined and the others blank. alert($("input[name='isOnline']").prop('checked')); — Raining_Crumbs, Sep 18 '18 at 04:42
What do you mean by "It alerts but doesn't return true or false"? The code in your question certainly alerts `true` or `false` if you uncomment that line (see the example I linked above). Unfortunately, we can't debug working code. If this is not working in your use-case, then perhaps the issue is simply somewhere other than the code you've included here in the question. — Tyler Roper, Sep 18 '18 at 04:55
I believe I have uncovered another layer to my issue. It is as if my environment isn't seeing the edits to my code. It very well might work. But my code doesn't recognize there has been a change. Either something is getting chached or my wamp server is acting up. — Raining_Crumbs, Sep 18 '18 at 05:00

score 0 · Answer 1 · answered Sep 18 '18 at 04:41

As Tyler Roper pointed out, .prop() function should just work.

You can try

$('#submit').on('click', function() {
    var isOnline1=$("input[type='checkbox']").val();
    var isOnline2=$("input[name='isOnline']").prop('checked');
    var isOnline3=$("input[name='isOnline']").is('checked');
    console.log(isOnline1);
    console.log(isOnline2);
    console.log(isOnline3);
});

I created a codepen for it: https://codepen.io/delpielo/pen/zJmevg, simply comparing the output when you click on 'submit' button with the checkbox checked / unchecked.

.val() always return 'on' - not what you want
.is('checked') always return false - not what you want
.prop('checked') - returns false if not checked, true otherwise, exactly what you are looking for

yes you are correct, I have discovered my issue though. It appears that my Wamp server was acting up and wasn't displaying my latest pushes to the site. This explains why it seemed like it was skipping my code without breaking. I restarted my wamp server and it started recognizing my changes. — Raining_Crumbs, Sep 18 '18 at 05:09

score 0 · Accepted Answer · answered Sep 18 '18 at 05:10

0

It appears that my Wamp server was acting up and wasn't displaying my latest pushes to the site. This explains why it seemed like it was skipping my code without breaking. I restarted my wamp server and it started recognizing my changes.

answered Sep 18 '18 at 05:10

Raining_Crumbs

9
4

checking to see if Checkbox is checked is being skipped during execution

2 Answers2