如何使用jQuery获取同name不同value的点击按钮值？

嘿，这个需求太常见啦，用jQuery分分钟搞定，我给你两种实用方案，覆盖静态和动态生成的按钮场景：

方案1：直接绑定点击事件（适合静态渲染的按钮） #

假设你的按钮是这类结构（不管是<button>还是<input type="button">都适用）：

<button name="actionBtn" value="save">保存</button>
<button name="actionBtn" value="delete">删除</button>
<input type="button" name="actionBtn" value="edit" />

直接给所有匹配name="actionBtn"的按钮绑定点击事件，用$(this)就能拿到当前点击按钮的value：

// 选择所有name为actionBtn的按钮，绑定click事件
$('button[name="actionBtn"], input[type="button"][name="actionBtn"]').click(function() {
    // 获取当前点击按钮的value值
    const clickedValue = $(this).val();
    console.log('你点击的按钮值是：', clickedValue);
    
    // 示例：根据不同value执行对应逻辑
    if (clickedValue === 'save') {
        console.log('执行保存操作');
    } else if (clickedValue === 'delete') {
        console.log('执行删除操作');
    } else if (clickedValue === 'edit') {
        console.log('执行编辑操作');
    }
});

核心点：$(this)代表当前触发点击事件的按钮元素，调用.val()就能直接获取它的value属性值。

方案2：事件委托（适合动态生成的按钮） #

如果你的按钮是通过JavaScript动态添加到页面的（比如异步加载、用户操作后新增），直接绑定事件会失效，这时候用事件委托更靠谱：

// 选择一个静态存在的父容器（推荐用更具体的父元素，比如#btnContainer，比body性能更好）
$('#btnContainer').on('click', 'button[name="actionBtn"], input[type="button"][name="actionBtn"]', function() {
    const clickedValue = $(this).val();
    alert('你点击的按钮值是：' + clickedValue);
});

原理：把点击事件绑定到静态父元素上，当子按钮触发点击时，事件会冒泡到父元素，父元素再判断触发元素是否匹配选择器，这样哪怕后续新增的按钮也能正常触发事件。

小Tips #

• 如果所有按钮都是同一种类型（比如全是<button>），可以简化选择器为$('button[name="actionBtn"]')；
• 不确定选择器是否正确时，用console.log($('button[name="actionBtn"]'))在浏览器控制台查看选中的元素集合，确认没选错。

内容的提问来源于stack exchange，提问作者Mayank Sharma