使用jQuery检索按钮值_Jquery - Fatal编程技术网

使用jQuery检索按钮值

jquery

使用jQuery检索按钮值,jquery,Jquery,一个简单的例子，我正在尝试使用jQuery检索按钮被按下时的value属性，下面是我得到的： <script type="text/javascript"> $(document).ready(function() { $('.my_button').click(function() { alert($(this).val()); }); }); </script> <button class

一个简单的例子，我正在尝试使用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>


$（文档）.ready（函数（）{
$（'.my_按钮'）。单击（函数（）{
警报（$（this.val（））；
});
});
按钮标签

在Firefox中，我的警报显示“buttonValue”，这很好，但在IE7中，它显示“ButtonLabel”

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

非常感谢

答复: 我现在正在使用

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

作为按钮值，您需要在jquery中使用.attr（）方法。这应该可以

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


$（文档）.ready（函数（）{
$（'.my_按钮'）。单击（函数（）{
警报（$（this.attr（“值”））；
});
});

您还可以使用attr设置属性，了解更多信息

这只适用于jQuery1.6+。有关旧版本，请参阅PostModern的答案。

如果您想获取值属性（buttonValue），那么我将使用：

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


$（文档）.ready（函数（）{
$（'.my_按钮'）。单击（函数（）{
警报（$（this.attr（'value'））；
});
});

尝试以下按钮：

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

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

不能将

.attr（'value'）

或

.val（）

与IE中的按钮一起使用。IE将.val（）和.attr（“value”）报告为按钮元素的文本标签（内容），而不是值属性的实际值

您可以通过临时删除按钮的标签来解决此问题：

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

IE中的按钮还有一些其他的怪癖。我已经发布了。

受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解决。也许这可以包含在PostModern的解决方案中：

您还可以使用新的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>


$（文档）.ready（函数（）{
$（'.my_按钮'）。单击（函数（）{
警报（$（this.attr（'data-value'））；
});
});
按钮标签

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

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

为按钮赋予值属性，然后使用以下方法检索值：

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


$（文档）.ready（函数（）{
$（“#隐藏”）。单击（函数（）{
$（“p”）.toggle（）；
var x=$（“#隐藏”）.text（）；
如果（x==“隐藏”）{
$（“按钮”）.html（“显示”）；
}
其他的
{
$（“按钮”）.html（“隐藏”）；
}
});
});
如果你点击“隐藏”按钮，我将消失
隐藏

感谢您的支持，IE7仍然返回“按钮标签”。IE7对元素中包含文本数据这一事实感到非常困难。如果你想使用一个图像，你应该使用IE6和IE7（不是IE8）来显示与标签相关的错误。标记的内部文本覆盖了几乎所有效果的value属性。这不起作用。在IE6/7中，使用.val（）或.attr（'value'）返回相同的错误内容，这在2015年不再适用于我。现在我必须做$（this）.text（）。谢谢，但我实际上在我的按钮中显示了一个图像，所以它需要是一个。好的，我意识到我可以使用并输入type=“image”，这很有效，谢谢。但它仍然不适用于IE7，请参阅下面我的文章。这个问题是谷歌搜索“jquery按钮值IE7”的最佳结果，这正是我需要知道的，也是一个很好的解决方案。感谢jQuery 1.6+中的

.val（）

函数解决了这个错误，现在应该可以像IE6/7一样工作了（请参阅）。为了帮助其他阅读本文的人，18票的答案是@postpostmodern编写的，由Nowaker编辑：-）这不是真的<代码>按钮没有值属性。button有一个value属性，尽管button有一个value属性，但您可以在juery Val的帮助下更新和获取它。但你的解决方案对我有效。我想我只需要和中的HTML文本值。然后使用if条件检查文本。

 <!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>