javascript 如何只选择一个输入

x3naxklr 于 2023-04-19 发布在 Java

关注(0)|答案(1)|浏览(148)

请告诉我如何使一个模拟的无线电输入与复选框？能够选择只有一个输入

<input type="checkbox" name="subcategory">
<input type="checkbox" name="subcategory">
<input type="checkbox" name="subcategory">
<input type="checkbox" name="subcategory">

const inputs = document.querySelectorAll('input[name="subcategory"]');

inputs.forEach((item) => {
  item.addEventListener('click', () => {
    item.checked = false;
  });
});

JavaScript

来源：https://stackoverflow.com/questions/76047783/how-to-select-only-one-input

1条答案

按热度按时间

bakd9h0s1#

如果你想让复选框“感觉像”收音机组，你需要做一些事情。

在复选框中添加数据属性以启用单选模式，即data-check-radio
确保输入名称以方括号结束，即name="subcategory[]"
为每个输入分配唯一值

我在下面创建了一个可以重用的helper函数：

// Reusable function
function CheckRadioHelper(dataProperty) {
  dataProperty = dataProperty || 'checkRadio';
  window.addEventListener('change', function (event) {
    if (
      event.target.tagName === 'INPUT' &&
      event.target.type === 'checkbox' &&
      (
        (
          event.target.dataset &&
          event.target.dataset.hasOwnProperty(dataProperty)
        ) ||
        event.target.hasAttribute(`data-${toKebabCase(dataProperty)}`)
      )
    ) {
      document.querySelectorAll(`input[name="${event.target.name}"]`)
        .forEach(function(sibling) {
          if (sibling.value !== event.target.value) {
            sibling.checked = false;
          }
        });
    }
  });
}

CheckRadioHelper(); // Now, call it

// Source: https://stackoverflow.com/a/67243723/1762224
function toKebabCase(str) {
  return str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, function(match, offset) {
    return (offset ? '-' : '') + match.toLowerCase();
  });
}

<input data-check-radio type="checkbox" name="subcategory[]" value="1" />
<input data-check-radio type="checkbox" name="subcategory[]" value="2" />
<input data-check-radio type="checkbox" name="subcategory[]" value="3" />
<input data-check-radio type="checkbox" name="subcategory[]" value="4" />

**注意：**我增加了一个toKebabCase方法，以防Element.prototype.dataset不存在，它福尔斯到使用属性检查。

下面是一个简化的ES6版本：

// Reusable function
const CheckRadioHelper = (dataProperty = 'checkRadio') => {
  window.addEventListener('change', ({ target }) => {
    if (
      target.tagName === 'INPUT' &&
      target.type === 'checkbox' &&
      target.dataset.hasOwnProperty(dataProperty)
    ) {
      document.querySelectorAll(`input[name="${target.name}"]`)
        .forEach((sibling) => {
          if (sibling.value !== target.value) {
            sibling.checked = false;
          }
        });
    }
  });
}

CheckRadioHelper(); // Now, call it

<input data-check-radio type="checkbox" name="subcategory[]" value="1" />
<input data-check-radio type="checkbox" name="subcategory[]" value="2" />
<input data-check-radio type="checkbox" name="subcategory[]" value="3" />
<input data-check-radio type="checkbox" name="subcategory[]" value="4" />

赞(0）回复(0）举报 2023-04-19

我来回答

javascript 如何只选择一个输入

1条答案

相关问题

热门标签

最新问答