使用javascript查找多个按钮的值

Question

我需要在页面上有多个按钮（通过 PHP 循环创建）——没有固定数量的按钮，因为显示的每条记录都会有一个。我想在单击时使用 javascript 获取该按钮的值。

到目前为止，html 看起来像：

<button id="update[0]" value="test">Update</button>
<button id="update[1]" value="test">Update</button>
<button id="update[2]" value="test">Update</button>
etc....

我的脚本是：

$(document).ready("#update").click(function() {
    var updateId = $("#update").val
    alert(updateId);
});

到目前为止，脚本检测到何时单击了任何 #update[] 按钮，但是我如何知道特定按钮的索引以获取值（即，如果单击了 #update[38]，我怎么知道它是 #update[38] 所以我能找到那个特定按钮的值吗？

谢谢。

Answer 1

您不希望像返回文档那样链接准备好的文档。

$(document).ready("#update").click(function() {

所以你捕获的是 document.click 而不是 button.click 所以当你引用 $(this).val() 你会得到不存在的 document.value。

应该是：

$(document).ready(function () {
    $("button").click(function () {
        //no reason to create a jQuery object just use this.value
        var updateId = this.value;
        alert(updateId);
    });
});

http://jsfiddle.net/SeanWessell/2Lf6c3fx/

Answer 2

使用“this”关键字。

$(document).ready("#update").click(function() {
    var updateId = $(this).val();
    alert(updateId);
});

javascript 中的 this 关键字允许您引用正在与之交互的对象的特定实例。

另外，将“()”添加到 val 的末尾。

Answer 3

我相信你的意思是使用

var updateId = $("#update").val()

• 使用 jQuery，您可以使用 $(this).val()
• 您还可以使用.text() 获取按钮的文本
• 如果按钮具有 value 属性，则可以使用纯 Javascript 使用 .value

看到这个：Javascript Get Element Value

Answer 4

我建议如下

<button id="0" class="updatebutton" value="test">Update</button>
<button id="1" class="updatebutton" value="test">Update</button>
<button id="2" class="updatebutton" value="test">Update</button>

使用一个类来应用你的点击功能。

$(document).ready(function () {
    $("updatebutton").click(function () {
        var updateId = this.id;
        alert(updateId);
    });
});

并使用id来指定按钮的索引。

Answer 5

诀窍是为所有按钮赋予相同的类，然后使用 $(this) 找出单击了哪个按钮。 一旦你知道了这个按钮，你就可以检查它的任何属性，比如 id、value 或 name。

$(function() {

  $(".xx").on("click", function(evt) {
    var clicked_button = $(this);
    alert(clicked_button.attr("value"));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<button id="update_1" class="xx" value="test1">Button 1</button>
<button id="update_2" class="xx" value="test2">Button 2</button>
<button id="update_3" class="xx" value="test3">Button 3</button>

Answer 6

您好，您的 javascript 有一些问题。

1. 您正在将 onClick 附加到文档！ ready 函数返回文档。

错误：

$(document).ready("#update").click(function() {

对：

$(document).ready(function () { $(valid_selector).click...

1. 您正在尝试使用 $('#update') 重新获取按钮，其中 1 不获取任何内容，如果获取，则 2 将返回所有按钮。所以在 click 函数的范围内使用 $(this) 来代替被点击的按钮。

这是您的 javascript 更正：

https://jsfiddle.net/ffkekpmh/

//When the document is ready call this function
$(document).ready(function () {

    //Select all buttons whoes id starts with update
    //https://api.jquery.com/category/selectors/attribute-selectors/
    $('button[id^="update"]').click(function() {

        //Store the id attribute from the clicked button
        var updateId = $(this).attr("id");

        //Store the value attribute from the clicked button
        var value = $(this).attr("value");


        alert("You clicked button:"+updateId+" with value: "+value);

    });

});