如何点击div切换Twig模板中form_row的指定类？

没问题，其实Twig渲染完之后最终还是普通的HTML元素，核心思路和你操作普通div完全一致——先定位到Twig生成的目标元素，再绑定点击事件切换类就好。我给你一步步拆解：

1. 先明确Twig渲染后的HTML结构 #

你的Twig代码{{ form_row(onboardingChoicesChild.children.0, {'label_attr': {'class':'textselection'}}) }}，通常会生成类似这样的HTML（具体结构取决于你的Symfony表单主题，但核心结构差不多）：

<div class="form-row">
  <label class="textselection" for="onboarding_choices_child_0">你的标签文本</label>
  <input type="..." id="onboarding_choices_child_0" name="onboardingChoicesChild[0]">
</div>

我们的目标是点击外层的div（也就是form_row生成的容器），切换里面label的textselection类。

2. 给form_row添加可识别的类（方便定位） #

为了更精准地选择到这个form_row容器，建议给它加一个自定义类，比如clickable-form-row，修改你的Twig代码：

{{ form_row(onboardingChoicesChild.children.0, {
  'label_attr': {'class':'textselection'},
  'attr': {'class': 'clickable-form-row'}
}) }}

这里的attr参数会把类添加到form_row生成的外层容器上（如果你的表单主题用的是form_group，效果也是一样的）。

3. 编写JavaScript切换类 #

用原生JS就能轻松实现，只需要在DOM加载完成后绑定点击事件：

// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
  // 找到所有带clickable-form-row类的容器
  document.querySelectorAll('.clickable-form-row').forEach(row => {
    row.addEventListener('click', function() {
      // 定位当前容器内的label元素
      const targetLabel = this.querySelector('label');
      // 切换textselection类
      targetLabel.classList.toggle('textselection');
    });
  });
});

如果你习惯用jQuery，代码会更简洁：

$(document).ready(function() {
  $('.clickable-form-row').on('click', function() {
    $(this).find('label').toggleClass('textselection');
  });
});

额外情况：如果是点击label本身切换类 #

如果你想实现点击label自己来切换类，那可以给label加一个固定的标识类（避免切换后找不到元素），修改Twig代码：

{{ form_row(onboardingChoicesChild.children.0, {
  'label_attr': {'class':'toggleable-label textselection'}
}) }}

然后JS代码：

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.toggleable-label').forEach(label => {
    label.addEventListener('click', function() {
      this.classList.toggle('textselection');
    });
  });
});

这样不管textselection类是否存在，都能通过toggleable-label找到这个label元素，完美实现切换效果~

内容的提问来源于stack exchange，提问作者harold finch