如何在JavaScript中获取被点击按钮的特定值？附问题代码

嘿，我一眼就发现你代码里的小问题啦！你现在的写法不管点哪个按钮，都会输出第一个按钮的apple值，原因很简单：

你用了document.getElementById("checkBtn")，但ID是页面唯一的，不管你点击哪个按钮，这段代码只会找到那个ID为checkBtn的按钮，自然拿不到其他按钮的值。

下面给你修正后的方案：

第一步：修正HTML（保证ID唯一） #

首先把重复的id='checkBtn'去掉，因为多个元素用同一个ID不符合规范，我们用类来统一标识这些按钮：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type='submit' class='checkBtn' name='checkBtn' value='apple'><i class='fa fa-check'></i></button>
<button type='submit' class='checkBtn' name='checkBtn' value='banana'><i class='fa fa-check'></i></button>
<button type='submit' class='checkBtn' name='checkBtn' value='orange'><i class='fa fa-check'></i></button>

第二步：修改JS逻辑（获取当前点击的按钮） #

在点击事件里，this就代表当前被点击的按钮元素，我们直接用它来拿值就行，两种写法都可以：

写法1（jQuery方式）：

jQuery('.checkBtn').click(function () {
  // $(this)把原生元素转成jQuery对象，用.val()拿值
  console.log($(this).val());
});

写法2（原生JS方式）：

jQuery('.checkBtn').click(function () {
  // 直接用原生this.value拿值，更简洁
  console.log(this.value);
});

这样不管你点哪个按钮，控制台都会输出对应按钮的value值啦～

内容的提问来源于stack exchange，提问作者Random buddy