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设置属性，更多信息in the docs。

这仅适用于JQuery 1.6+。请参阅postpostmodern对旧版本的回答。

Answer 2

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

您无法使用.attr('value')或.val()在IE中使用按钮。 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中还有其他一些带按钮的怪癖。我已发布a fix for the two most common issues here。

Answer 3

按钮没有值属性。要获取按钮的文本，请尝试：

$('.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");
});

Answer 6

尝试按钮：

<input type="button" class="my_button" name="buttonName" value="buttonValue" />

Answer 7

受postpostmodern的启发我已经做了这个，让.val（）在我的javascript代码中工作：

jQuery(function($) {

    if($.browser.msie) {
        // Fixes a know issue, that buttons value is overwritten with the text

        // Someone with more jQuery experience can probably tell me
        // how not to polute jQuery.fn here:
        jQuery.fn._orig_val = jQuery.fn.val

        jQuery.fn.val = function(value) {
            var elem = $(this);
            var html
            if(elem.attr('type') == 'button') {
                // if button, hide button text while getting val()
                html = elem.html()
                elem.html('')
            }
            // Use original function
            var result = elem._orig_val(value);
            if(elem.attr('type') == 'button') {
                elem.html(html)
            }
            return result;
        }
    }
})

然而，它并没有解决提交问题，后现代解决了。也许这可以包含在postpostmodern的解决方案中：http://gist.github.com/251287

Answer 8

如果你想获得value属性（buttonValue），那么我会使用：

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

Answer 9

 <!DOCTYPE html>
 <html>
 <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
 </script>
 <script>
 $(document).ready(function(){
   $("#hide").click(function(){
    $("p").toggle();

    var x = $("#hide").text();

      if(x=="Hide"){
      $("button").html("show");

      }
     else 
     {
     $("button").html("Hide");

      }

       });

   });

  </script>
  </head>
  <body>

 <p>If you click on the "Hide" button, I will disappear.</p>

 <button id="hide">Hide</button>



 </body>
 </html>

使用jQuery检索Button值

9 个答案: