当前位置：首页 > JavaScript

js实现选中效果

2026-04-04 01:14:40JavaScript

实现选中效果的方法

使用CSS类切换

通过JavaScript动态添加或移除CSS类来实现选中效果。定义一个高亮样式类，通过事件监听切换类名。

document.querySelectorAll('.item').forEach(item => {
  item.addEventListener('click', function() {
    this.classList.toggle('selected');
  });
});

对应CSS样式：

.selected {
  background-color: #4CAF50;
  color: white;
}

直接修改style属性

通过JavaScript直接修改元素的style属性实现即时样式变化。

js实现选中效果

const elements = document.querySelectorAll('.selectable');
elements.forEach(el => {
  el.addEventListener('click', () => {
    el.style.backgroundColor = '#2196F3';
    el.style.color = '#fff';
  });
});

表单元素选中状态

针对radio或checkbox类型输入元素，使用checked属性控制选中状态。

const radios = document.querySelectorAll('input[type="radio"]');
radios.forEach(radio => {
  radio.addEventListener('change', function() {
    if(this.checked) {
      console.log('Selected value:', this.value);
    }
  });
});

数据驱动选中状态

结合数据模型实现选中状态管理，适用于复杂交互场景。

js实现选中效果

const items = [
  { id: 1, selected: false },
  { id: 2, selected: false }
];

function renderItems() {
  const container = document.getElementById('item-container');
  container.innerHTML = items.map(item => `
    <div class="item ${item.selected ? 'selected' : ''}" 
         data-id="${item.id}">
      Item ${item.id}
    </div>
  `).join('');

  document.querySelectorAll('.item').forEach(el => {
    el.addEventListener('click', () => {
      const id = parseInt(el.dataset.id);
      items.forEach(item => {
        item.selected = item.id === id;
      });
      renderItems();
    });
  });
}

多选与单选模式

根据需求实现不同选择模式的控制逻辑。

// 单选模式
function setupSingleSelect() {
  let currentSelected = null;

  document.querySelectorAll('.selectable').forEach(el => {
    el.addEventListener('click', () => {
      if(currentSelected) {
        currentSelected.classList.remove('selected');
      }
      el.classList.add('selected');
      currentSelected = el;
    });
  });
}

// 多选模式
function setupMultiSelect() {
  document.querySelectorAll('.selectable').forEach(el => {
    el.addEventListener('click', () => {
      el.classList.toggle('selected');
    });
  });
}

无障碍访问优化

为选中效果添加ARIA属性，提升可访问性。

document.querySelectorAll('[role="option"]').forEach(option => {
  option.addEventListener('click', () => {
    const isSelected = option.getAttribute('aria-selected') === 'true';
    option.setAttribute('aria-selected', !isSelected);
    option.classList.toggle('selected');
  });
});