javascript - 为什么选中时复选框属性显示为 'false'(未选中)？

Question

我的问题是我已经创建了一个可以工作的 CodePen 来完美地展示我的想法。在网络服务器上实现代码时，它会停止正常工作。

具体来说，我的复选框一次只允许选中一个复选框。当用户尝试检查多个时，它会取消选中最近的一项，并发出警报。它通过在调用函数时检查“checked”属性来实现此目的。根据属性，从复选框计数器中添加或减去一个点。接下来，检查复选框计数器以确保仅选择一个 - 否则，它会减去一个点并取消选中最重置的复选框。

在 Web 服务器上演示时，单击每个框都会从复选框计数器中减去。这反过来又只允许不断向下计数的计数器 - 没有真正进行检查。

所以我的问题是:为什么该复选框似乎忽略了它已被选中的事实？

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 。项目here 。转至涉及收入的问题(第 12 页)。

Answer 1

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

必须更具体，例如

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

这是因为您对每个页面使用相同的 ID。