Why do checkbox property show as 'false' (not checked) when checked?

Question

My issue is that I have created a working CodePen that demonstrates my idea perfectly. When implementing the code on the web server it stops working correctly.

Specifically, my checkboxes should only allow one checkbox to be checked at a time. When the user attempts to check more than one, it unchecks the most recent, and gives an alert. It does this by checking for the "checked" property when the function is called. Depending on the property, a point is added or subtracted from the checkbox counter. Following, the checkbox counter is checked to ensure only one is selected - otherwise, it subtracts a point and unchecks the most reset checkbox.

When demonstrating on the web server, clicking each box subtracts from the checkbox counter. This in turn only allows for a constantly downward counting counter - no check really going on.

So my question: Why does the checkbox seem to ignore the fact that it is checked?

HTML

<div id="container">
  <input id="thisone" class="chk" type="checkbox" value="1"/>
  <label for="thisone">Ha</label>
  <input id="thatone" class="chk" type="checkbox" value="1"/>
  <label for="thatone">Mwaha</label>
  <input id="thishere" class="chk" type="checkbox" value="1"/>
  <label for="thishere">Hi</label>
  <input id="thatthere" class="chk" type="checkbox" value="1"/>
  <label for="thatthere">Hello</label>  
</div>
<h3></h3>

JS

var DATA = {
  incomeChecks: 0  
};

function incomeCheck(e) {
  $('h3').text("income check, launched. DATA: "+DATA.incomeChecks);
  var targ = "#"+e.target.id;

  if( $(targ).prop( "checked" ) ) {
    DATA.incomeChecks += 1;
  }else{
    DATA.incomeChecks -= 1;
  }

  if( DATA.incomeChecks > 1 ) {
    $('h3').text($(targ).prop("checked"));
    $(targ).prop( "checked", false );
    DATA.incomeChecks -= 1;
    alert("Please select only one.");
  }
}

$('#container input').on( "click", incomeCheck );

CodePen here . Project here . Go to the question that references income (page 12).

Answer 1

var targ = "#"+e.target.id;

must be more specific like

var targ = "#page_12 #"+e.target.id;

This is because you are using the same IDs for each page.

Answer 2

I'm not certain I understand your problem, but maybe this is because the server is treating the defaults on your check boxes differently. In your HTML, you have set the value properties for all the checkboxes to 1, but the value of a check box is not the same thing as the checked property of a checkbox. When you check these boxes you are changing the checked property from missing to true.

Perhaps you could see if adding checked="false" to the inputs:

<input id="thisone" class="chk" type="checkbox" checked="false" value="1"/>

But also like the others said, what you are really looking for is a radio button. Checkboxes are only for situations where you can have multiple things selected at the same time.