我使用Shopify应用程序,并希望自定义一些我不能在应用程序中做的事情.

我有4个表格,表格中有4-7个输入单选按钮

每个表单的 struct 如下:

Form 1
<div class="globo-form-control layout-2-column">
  <div class="globo-form-input">
    <ul class="flex-wrap">

      <li class="globo-list-control option-3-column">
        <div class="radio-wrapper">
          <input class="radio-input" type="radio" />
          <label class="radio-label">White</label>
        </div>
      </li>

      <li class="globo-list-control option-3-column">
        <div class="radio-wrapper">
          <input class="radio-input" type="radio" />
          <label class="radio-label">White</label>
        </div>
      </li>

    </ul>
  </div>
</div>

Form 2
the same

我如何才能为他只能 Select 一张表格的每一张表格?

我试过了,但这不管用,然后他把所有的东西都拿掉了

        const rd = document.querySelectorAll('.radio-label');

        rd.forEach(e => {
            e.addEventListener('click', el => {
                rd.forEach(e2 => {
                    e2.classList.remove('selected-radio');
                })
              e.classList.add('selected-radio');
            });
        });

推荐答案

为了确保每个表单只能 Select 一个单选按钮,您需要在各自的表单中分别确定每组单选按钮的目标.下面是一个如何修改代码的示例:

// Get all the forms on the page
const forms = document.querySelectorAll('.globo-form-control');

// Function to handle radio button selection
function handleRadioSelection(label) {
  const radioLabels = label.closest('.globo-form-control').querySelectorAll('.radio-label');

  radioLabels.forEach(otherLabel => {
    if (otherLabel !== label) {
      otherLabel.classList.remove('selected-radio');
      otherLabel.previousElementSibling.checked = false; // Uncheck the associated radio input
    }
  });

  // Toggle selection for the clicked radio button label
  label.classList.toggle('selected-radio');
  label.previousElementSibling.checked = label.classList.contains('selected-radio'); // Check/uncheck the associated radio input
}

// Iterate through each form
forms.forEach(form => {
  const radioLabels = form.querySelectorAll('.radio-label');

  // Add event listener to each radio label within the form
  radioLabels.forEach(label => {
    label.addEventListener('click', () => {
      handleRadioSelection(label);
    });

    // Add event listener to associated radio input for change event
    label.previousElementSibling.addEventListener('change', () => {
      handleRadioSelection(label);
    });
  });
});
<div class="globo-form-control layout-2-column">
  <div class="globo-form-input">
    <ul class="flex-wrap">

      <li class="globo-list-control option-3-column">
        <div class="radio-wrapper">
          <input class="radio-input" type="radio" />
          <label class="radio-label">White</label>
        </div>
      </li>

      <li class="globo-list-control option-3-column">
        <div class="radio-wrapper">
          <input class="radio-input" type="radio" />
          <label class="radio-label">White</label>
        </div>
      </li>

    </ul>
  </div>
</div>

<div class="globo-form-control layout-2-column">
  <div class="globo-form-input">
    <ul class="flex-wrap">

      <li class="globo-list-control option-3-column">
        <div class="radio-wrapper">
          <input class="radio-input" type="radio" />
          <label class="radio-label">White</label>
        </div>
      </li>

      <li class="globo-list-control option-3-column">
        <div class="radio-wrapper">
          <input class="radio-input" type="radio" />
          <label class="radio-label">White</label>
        </div>
      </li>

    </ul>
  </div>
</div>

Javascript相关问答推荐

如何在不使用类型化数组的情况下将32位浮点数按位转换为整值?

我的YouTube视频没有以html形式显示,以获取免费加密信号

我不知道为什么我的JavaScript没有验证我的表单

是否有方法在OpenWeatherMap API中获取过go 的降水数据?

过滤对象数组并动态将属性放入新数组

为什么当我解析一个promise时,输出处于挂起状态?

无法检测卡片重叠状态的问题

如何使用子字符串在数组中搜索重复项

JQuery Click事件不适用于动态创建的按钮

让chart.js饼图中的一个切片变厚?

变量在导入到Vite中的另一个js文件时成为常量.

将异步回调转换为异步生成器模式

为什么我的按钮没有从&q;1更改为&q;X&q;?

回溯替代方式

无法避免UV:flat的插值:非法使用保留字"

FireBase云函数-函数外部的ENV变量

如何在脚本编译后直接将RxJ模块导入浏览器(无需Angel、webpack、LiteServer)

为什么我看到的是回复,而不是我的文档?

如何在Reaction中清除输入字段

调用特定数组索引时,为什么类型脚本不判断未定义