javascript - 动态创建的表上的复选框(每行最多只能选择 1 个)

Question

我有一个动态创建的表，每个表行有三个复选框。我想要做的是每个表行只有 1 个选中的复选框。因此，如果用户选中了一个复选框并且他们单击了同一行中的另一个复选框，它将取消选中前一个复选框并选中当前单击的复选框。我有以下代码:

$('.classCheckboxOne').on 'change', ->
  if $('.classCheckboxOne').prop('checked')
    $('.classCheckboxTwo').prop('checked', false)
    $('.classCheckboxThree').prop('checked', false)

$('.classCheckboxTwo').on 'change', ->
  if $('.classCheckboxTwo').prop('checked')
    $('.classCheckboxOne').prop('checked', false)
    $('.classCheckboxThree').prop('checked', false)

$('.classCheckboxThree').on 'change', ->
  if $('.classCheckboxThree').prop('checked')
    $('.classCheckboxTwo').prop('checked', false)
    $('.classCheckboxOne').prop('checked', false)

所以这段代码适用于我表格的第一行，但表格的其余部分将无法正常运行。我知道处理此类问题的唯一其他方法是使用 id 而不是类名，但这对我的情况不起作用，因为表是动态创建的，因此会有多行表元素包含相同的 id。所以我的问题是如何让上述功能适用于我的每个表格行。谢谢。

Answer 1

通常这就是您拥有 HTML 单选按钮的目的。只需确保同一组中的按钮具有唯一名称，也许是一个 id 以及表格的行号。

<input type="radio" name="x" value="one" checked> One
<input type="radio" name="x" value="two"> Two
<input type="radio" name="x" value="three"> three 
<hr />
<input type="radio" name="y" value="one" checked> One
<input type="radio" name="y" value="two"> Two
<input type="radio" name="y" value="three"> three 
<hr />
<input type="radio" name="z" value="one" checked> One
<input type="radio" name="z" value="two"> Two
<input type="radio" name="z" value="three"> three 

但是，如果您想使用复选框来实现，请为每一行的所有复选框分配一个类名。然后你可以做这样的事情。

// Checkbox onclick function
function selectOneInRow(event) {
  // Get all checkboxes with same classname 
  // as the one you just clicked
  var nodes = document.querySelectorAll('.' + event.target.className);
  // deselect all with same class
  for(var i = 0; i < nodes.length; i++) {
    nodes[i].checked = false
  }
  // but select the one you clicked
  event.target.checked = true;
}


// Just code to generate checkboxes
var el = document.getElementsByTagName("body")[0];
var checkboxes = 3;
var rows = 5;

function createCheckbox(rowNumber) {
  var input = document.createElement('input')
  input.type = 'checkbox';
  input.className = 'checkbox-' + rowNumber;
  input.onclick = selectOneInRow;
  return input;
}

for (var i = 0; i < rows; i++) {
  for (var j = 0; j < checkboxes; j++) {
    el.appendChild(createCheckbox(i))
  }
  el.appendChild(document.createElement('hr'));
}