使用 jQuery 检索 Button 值答案

【问题标题】：Retrieve Button value with jQuery使用 jQuery 检索 Button 值
【发布时间】：2009-01-28 09:55:54
【问题描述】：

一个简单的，我试图在使用 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" />

【问题讨论】：

为了帮助其他人阅读本文，18 票的答案是由 @postpostmodern 撰写并由 Nowaker 编辑的 :-)

标签： jquery

【解决方案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+。请参阅后现代对旧版本的回答。

【讨论】：

谢谢，IE7 仍然返回“按钮标签”。
IE7 很难理解元素内有文本数据这一事实。如果你想使用图像，你应该使用
IE6 和 IE7（不是 IE8）似乎表现出与
这不起作用。使用 .val() 或 .attr('value') 在 IE6/7 中返回相同的错误内容
这在 2015 年不再适用于我。现在我必须做 $(this).text()。

【解决方案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 中的按钮还有一些其他的怪癖。我已经发布了a fix for the two most common issues here。

【讨论】：

这个问题是“jquery button value ie7”的顶级谷歌搜索结果，正是我需要知道的和一个很好的解决方案。谢谢
jQuery 1.6+ 中的 .val() 函数有一个解决此错误的方法，现在应该可以在 IE6/7 上正常工作（请参阅 Ticket #1954）。

【解决方案3】：

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

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

【讨论】：

这不是真的。 button 确实有一个 value 属性。 w3.org/TR/html-markup/button.button.html#button.button
按钮确实有一个 value 属性，你可以在 juery val 的帮助下更新和获取它
虽然 Button 有一个 value 属性。但是您的解决方案对我有用。我想我只需要中的 HTML 文本值。然后使用 if 条件检查文本。

【解决方案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>

【讨论】：

【解决方案5】：

给按钮一个值属性，然后使用这个来检索值：

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

【讨论】：

【解决方案6】：

试试这个按钮：

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

【讨论】：

谢谢，但我实际上在我的按钮中显示了一个图像，所以它需要是一个
好的，意识到我可以使用 type="image" 并输入，这很有效，谢谢。

【解决方案7】：

受后现代的启发，我做了这个，让 .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;
        }
    }
})

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

【讨论】：

【解决方案8】：

如果你想获取值属性（buttonValue）那么我会使用：

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

【讨论】：

但它仍然不适用于 IE7，请参阅下面的解决方法。

【解决方案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>

【讨论】：