使用 jQuery 检索按钮值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/487056/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Retrieve Button value with jQuery
提问by Simon Hutton
A simple one, I'm trying to retrieve the value attribute of a button when its been pressed using jQuery, here's what I have:
一个简单的方法，我试图在使用 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>
In Firefox my alert displays 'buttonValue' which is great but in IE7 it displays 'Button Label'.
在 Firefox 中，我的警报显示“buttonValue”，这很好，但在 IE7 中它显示“按钮标签”。
What jQuery should I use to always get the button's value? Or should I be using a different approach?
我应该使用什么 jQuery 来始终获取按钮的值？或者我应该使用不同的方法？
Many thanks.
非常感谢。
ANSWER: I'm now using
答案：我现在正在使用
<input class="my_button" type="image" src="whatever.png" value="buttonValue" />
采纳答案by postpostmodern
I know this was posted a while ago, but in case anyone is searching for an answer and really wants to use a button element instead of an input element...
我知道这是前一段时间发布的，但如果有人正在寻找答案并且真的想使用按钮元素而不是输入元素......
You can notuse .attr('value')or .val()with a button in IE. IE reports both the .val() and .attr("value") as being the text label (content) of the button element instead of the actual value of the value attribute.
您不能在 IE 中使用.attr('value')或.val()按钮。IE 将 .val() 和 .attr("value") 报告为按钮元素的文本标签（内容），而不是 value 属性的实际值。
You can work around it by temporarily removing the button's label:
您可以通过暂时删除按钮的标签来解决它：
var getButtonValue = function($button) {
var label = $button.text();
$button.text('');
var buttonValue = $button.val();
$button.text(label);
return buttonValue;
}
There are a few other quirks with buttons in IE. I have posted a fix for the two most common issues here.
IE 中的按钮还有一些其他的怪癖。我在这里发布了两个最常见问题的修复程序。
回答by Neil Aitken
As a button value is an attribute you need to use the .attr() method in jquery. This should do it
由于按钮值是一个属性，您需要在 jquery 中使用 .attr() 方法。这应该做
<script type="text/javascript">
$(document).ready(function() {
$('.my_button').click(function() {
alert($(this).attr("value"));
});
});
</script>
You can also use attr to set attributes, more info in the docs.
您还可以使用 attr 设置属性，文档中的更多信息。
This only works in JQuery 1.6+. See postpostmodern's answer for older versions.
这仅适用于 JQuery 1.6+。有关旧版本，请参阅后后现代的答案。
回答by Mandeep Pasbola
Button does not have a value attribute. To get the text of button try:
按钮没有 value 属性。要获取按钮的文本，请尝试：
$('.my_button').click(function() {
alert($(this).html());
});
回答by krichard
You can also use the new HTML5 custom data- attributes.
您还可以使用新的 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>
回答by steady_daddy
Give the buttons a value attribute and then retrieve the values using this:
给按钮一个值属性，然后使用这个检索值：
$("button").click(function(){
var value=$(this).attr("value");
});
回答by Natrium
try this for your button:
为你的按钮试试这个：
<input type="button" class="my_button" name="buttonName" value="buttonValue" />
回答by sbglasius
Inspired by postpostmodern I have made this, to make .val() work throughout my javascript code:
受后后现代的启发，我做了这个，让 .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;
}
}
})
It does however, not solve the submit problem, solved by postpostmodern. Perhaps this could be included in postpostmodern's solution here: http://gist.github.com/251287
然而，它并没有解决提交问题，由后后现代解决。也许这可以包含在后现代的解决方案中：http://gist.github.com/251287
回答by Wayne Austin
if you want to get the value attribute (buttonValue) then I'd use:
如果你想获得值属性（buttonValue），那么我会使用：
<script type="text/javascript">
$(document).ready(function() {
$('.my_button').click(function() {
alert($(this).attr('value'));
});
});
</script>
回答by vlass
<!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>
