選中時，為什么復選框屬性顯示為“ false”（未選中）？

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 在這里 。 在這里進行項目。 轉到引用收入的問題（第12頁）。

Answer 1

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

必須更具體

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

這是因為您為每個頁面使用了相同的ID。

Answer 2

我不確定我是否理解您的問題，但這也許是因為服務器對待復選框默認值的方式有所不同。 在HTML中，您已將所有復選框的value屬性設置為1，但復選框的值與復選框的checked屬性不同。 選中這些框時，您會將選中的屬性從“ missing”更改為“ true”。

也許您可以看到是否在輸入中添加了checked =“ false”：

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

但也正如其他人所說，您真正要尋找的是一個單選按鈕。 復選框僅適用於可以同時選擇多個內容的情況。