Question

我有一个表，每行有三个复选框，我想要做的是这样，所以每行只能选择一个复选框。如果选中复选框，则将取消选中其他复选框。我目前拥有的代码如下：

$('#idCheckboxOne').on 'change', ->
  if $('#idCheckboxOne').prop('checked')
    $('#idCheckboxTwo').prop 'checked', false
    $('#idCheckboxThree').prop 'checked', false

$('#idCheckboxTwo').on 'change', ->
  if $('#idCheckboxTwo').prop('checked')
    $('#idCheckboxOne').prop 'checked', false
    $('#idCheckboxThree').prop 'checked', false

$('#idCheckboxThree').on 'change', ->
  if $('#idCheckboxThree').prop('checked')
    $('#idCheckboxTwo').prop 'checked', false
    $('#idCheckboxOne').prop 'checked', false

因此，此代码将在我的表的第一行，但不是任何其他行。我知道我的问题的一部分是我通过复选框的ID使用该函数，因此由于每个表行具有相同的复选框，因此其他表行的ID不是唯一的。所以我的问题是，为每个表行提供上述功能的最佳方法是什么？

Answer 1

两种方法：

使用单选按钮代替复选框。只能选择一个具有相同名称的单选按钮。

如果由于某种原因你想使用复选框而不是单选按钮，你可以使用class而不是id：

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

Answer 2

这将为您提供{em>任何复选框的通用解决方案，您可以将.group-checks类放在上面。这也是父母不可知的，所以它可以连续，div - 只要复选框在同一个容器中就没关系。

// attach handler to all checkboxes    
$('input:checkbox.grouped-checks').change(function(event) {
  // get the container of the checkbox clicked
  var $parent = $(this).parent();
  // unchecked all inputs in the container
  $parent.children('input[type="checkbox"]').prop('checked', false);
  // check the one you clicked on
  $(this).prop('checked', true);
});

这是codepen：

用于更改不在动态创建的表

2 个答案: