Question

我有三个按钮，当我点击一个按钮时，我想要该按钮的特定值

这是我的代码

＆＃13;

Accept

＆＃13;

jQuery(':button').click(function () {
          var checkBtn = document.getElementById("checkBtn");
          console.log(checkBtn.value);
        });

＆＃13;

Answer 1

$(this).val()正是您要找的。您的代码仅在单击任何按钮时记录特定（checkBtn）按钮的值。

这是获取点击按钮

的值的方法

$('button').click(function () {
          
          console.log($(this).val());
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='apple'><i class='fa fa-check'></i></button>


<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='linux'><i class='fa fa-check'></i></button>


<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='windows'><i class='fa fa-check'></i></button>

Answer 2

您的代码始终会查找具有唯一id checkBtn的按钮。 多个元素具有相同的id （它会失去id的目的）是无效的，所以当jQuery根据其{{1}查找元素时找到第一个之后它会停止（因为不应该是任何其他匹配），所以你总能得到相同的答案。

相反，只需使用关键字id（动态）来获取对当前正在运行事件处理程序的对象的引用：

＆＃13;

this

＆＃13;

$(':button').click(function () {
 console.log(this.value);    // Pure JavaScript way
 console.log($(this).val()); // jQuery way
});

＆＃13;

此处 another post of mine 讨论了<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type='submit' class='checkBtn' name='checkBtn' id='checkBtn1' value='apple'><i class='fa fa-check'></i></button> <button type='submit' class='checkBtn' name='checkBtn' id='checkBtn2' value='linux'><i class='fa fa-check'></i></button> <button type='submit' class='checkBtn' name='checkBtn' id='checkBtn3' value='windows'><i class='fa fa-check'></i></button>以及它如何动态绑定到各种对象。

现在，我认为你应该设置不同于现在的HTML，因为从语义上讲，提交按钮只是为了方便提交其他表单数据，而不是自己传达表单数据。此外，有多个提交按钮可能会导致意外的表单提交。因此，为了获得更清晰，更清晰的用户体验，我将创建3个单选按钮并提交一个提交按钮，而不是每个提交值的3个提交按钮。

＆＃13;

this

＆＃13;

$('button').click(function () {
 // Now, instead of "this", we just use a selector that finds the checked radio button
 console.log(document.querySelector("input[name='checkBtn']:checked").value);  // Pure JavaScript way
 console.log($("input[name='checkBtn']:checked").val());                       // jQuery way
});

＆＃13;

Answer 3

您可以使用this或e.target来引用点击的按钮。就目前而言，您正在选择ID为＃34; checkBtn＆＃34;的第一个按钮。作为旁注，在页面上使用相同id的多个元素并不是一个好习惯。

＆＃13;

jQuery(':button').click(function(e) {
          console.log(e.target.value);
        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type='submit' class='checkBtn' name='checkBtn' value='apple'><i class='fa fa-check'></i></button>


<button type='submit' class='checkBtn' name='checkBtn' value='linux'><i class='fa fa-check'></i></button>


<button type='submit' class='checkBtn' name='checkBtn'  value='windows'><i class='fa fa-check'></i></button>

＆＃13;

Answer 4

USe this.value其中this是当前上下文

＆＃13;

var valArray = [];
$('button').click(function() {
  if (valArray.indexOf(this.value) === -1) {
    valArray.push(this.value);
    console.log(valArray);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='apple'><i class='fa fa-check'></i>apple</button>


<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='linux'><i class='fa fa-check'></i>linux</button>


<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='windows'><i class='fa fa-check'></i>windows</button>

＆＃13;

如何从javascript中的按钮获取特定值

4 个答案: