使用jQuery检索Button值

Question

一个简单的,我正在尝试使用jQuery按下按钮时检索按钮的value属性,这就是我所拥有的:

<script type="text/javascript">
    $(document).ready(function() {
        $('.my_button').click(function() {
            alert($(this).val());
        });
    });
</script>

<button class="my_button" name="buttonName" value="buttonValue">
    Button Label</button>

在Firefox中,我的警报显示"buttonValue",这很棒,但在IE7中显示"按钮标签".

我应该使用什么jQuery来获得按钮的价值？或者我应该使用不同的方法？

非常感谢.

答案:我现在正在使用

<input class="my_button" type="image" src="whatever.png" value="buttonValue" />

Answer 1

由于按钮值是一个属性,您需要在jquery中使用.attr()方法.这应该做到这一点

<script type="text/javascript">
    $(document).ready(function() {
        $('.my_button').click(function() {
            alert($(this).attr("value"));
        });
    });
</script>

您还可以使用attr设置属性,在文档中添加更多信息.

这仅适用于JQuery 1.6+.请参阅postpostmodern的旧版本答案.

Answer 2

我知道这是在不久前发布的,但万一有人正在寻找答案,并且真的想使用按钮元素而不是输入元素...

您无法在IE中使用.attr('value')或.val()使用按钮.IE将.val()和.attr("value")报告为按钮元素的文本标签(内容),而不是value属性的实际值.

您可以通过暂时删除按钮的标签来解决它:

var getButtonValue = function($button) {
    var label = $button.text(); 
    $button.text('');
    var buttonValue = $button.val();
    $button.text(label);
    return buttonValue;
}

IE中还有一些带按钮的怪癖.我已经在这里找到了两个最常见问题的修复程序.

Answer 3

Button没有值属性.要获取按钮的文本,请尝试:

$('.my_button').click(function() {
     alert($(this).html());
});

Answer 4

您还可以使用新的HTML5自定义数据属性.

<script type="text/javascript">
$(document).ready(function() {
    $('.my_button').click(function() {
        alert($(this).attr('data-value'));
    });
});
</script>

<button class="my_button" name="buttonName" data-value="buttonValue">Button Label</button>

Answer 5

给按钮一个值属性,然后使用以下方法检索值:

$("button").click(function(){
  var value=$(this).attr("value");
});