正文

掌握原生JS实现排他性功能，从入门到实战

/0 浏览量
0522

前言

在Web开发中，排他性功能是一种常见的交互需求，它允许用户在执行某个操作时，确保其他操作不被触发。原生JavaScript（JS）提供了丰富的API来实现这样的功能。本文将带你从入门到实战，一步步掌握如何使用原生JS实现排他性功能。

一、入门篇

1.1 排他性概念

排他性功能，顾名思义，就是确保在某一时刻只有一个功能被激活。例如，在单选按钮（radio button）的选择中，只能选择一个选项；在多选框（checkbox）的选择中，可以同时选择多个，但每个选项只能被选中一次。

1.2 原生JS基础

在实现排他性功能之前，我们需要掌握一些原生JS的基础知识，如：

  • HTML元素选择器
  • 事件监听
  • 事件冒泡和捕获
  • 变量作用域

二、实战篇

2.1 单选按钮（radio button）的排他性

以下是一个单选按钮排他性功能的实现示例：

// HTML
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女

// JavaScript
const radios = document.querySelectorAll('input[type="radio"][name="gender"]');

radios.forEach(radio => {
  radio.addEventListener('click', function() {
    radios.forEach(radio => {
      radio.checked = false;
    });
    this.checked = true;
  });
});

2.2 多选框（checkbox）的排他性

以下是一个多选框排他性功能的实现示例：

// HTML
<input type="checkbox" name="hobby" value="reading"> 阅读
<input type="checkbox" name="hobby" value="music"> 音乐
<input type="checkbox" name="hobby" value="sports"> 运动

// JavaScript
const checkboxes = document.querySelectorAll('input[type="checkbox"][name="hobby"]');

checkboxes.forEach(checkbox => {
  checkbox.addEventListener('click', function() {
    const checkedCount = document.querySelectorAll('input[type="checkbox"][name="hobby"]:checked').length;
    if (checkedCount >= 2) {
      this.checked = false;
    }
  });
});

2.3 按钮点击排他性

以下是一个按钮点击排他性功能的实现示例：

// HTML
<button id="button1">按钮1</button>
<button id="button2">按钮2</button>

// JavaScript
const buttons = document.querySelectorAll('button');

buttons.forEach(button => {
  button.addEventListener('click', function() {
    buttons.forEach(btn => {
      btn.classList.remove('active');
    });
    this.classList.add('active');
  });
});

三、总结

通过本文的学习，相信你已经掌握了使用原生JS实现排他性功能的方法。在实际开发中，可以根据具体需求灵活运用这些方法，为用户提供更好的交互体验。希望本文能对你有所帮助！

-- 展开阅读全文 --