Question

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

具体来说，我的复选框应该只允许一次检查一个复选框。当用户尝试检查多个时，它会取消选中最新的，并发出警报。它通过在调用函数时检查“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。

Answer 2

我不确定我理解你的问题，但也许这是因为服务器正在以不同方式处理复选框上的默认值。在HTML中，您已将所有复选框的值属性设置为1，但复选框的值与复选框的checked属性不同。当您选中这些框时，您将把checked属性从missing更改为true。

也许您可以看到添加checked =＆＃34; false＆＃34;输入：

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

但也像其他人说的那样，你真正想要的是一个单选按钮。复选框仅适用于您可以同时选择多个内容的情况。

为什么checkbox属性显示为＆＃39; false＆＃39; （未选中）选中时？

2 个答案: