函数更改不适用于动态创建的表的复选框

Function to change checkboxes not working on dynamically created table

本文关键字：创建 复选框 动态 适用于 不适用 函数      更新时间：2023-09-26

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

$('#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对于其他表行来说并不是唯一的。因此，我的问题是，对于每个表行，具有上述功能的最佳方法是什么？

两种方法：

  1. 使用单选按钮而不是复选框。只能选择一个具有相同名称的单选按钮

  2. 如果出于某种原因，你想使用复选框而不是单选按钮，你可以使用class而不是ids:

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

这将为您放置.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);
});

这是代码笔：

相关文章：