如何從JavaScript中的按鈕獲取特定值

Question

那里有三個按鈕，當我單擊一個按鈕時，我想要該按鈕的具體值

這是我的代碼

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

 <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 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根據其id查找元素時，它會在找到第一個元素后停止（因為不應有任何其他匹配項） ），因此您總是會得到相同的答案。

相反，只需使用關鍵字this （它是動態的）來獲取對事件處理程序當前正在其上運行的對象的引用：

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

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

這是我的另一篇文章 ，討論了this以及它如何動態綁定到各種對象。

---

現在，我認為您應該以與現在不同的方式來設置HTML，因為從語義上講，提交按鈕僅用於促進其他表單數據的提交，而不是自己傳達表單數據。 同樣，具有多個提交按鈕可能導致意外的表單提交。 因此，對於更簡潔的UX，我將創建3個單選按鈕並具有一個Submit按鈕，而不是每個都帶有要提交的值的3個提交按鈕。

 $('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 }); 

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

Answer 3

您可以使用this或e.target引用單擊的按鈕。 就目前而言，您正在選擇ID為“ checkBtn”的第一個按鈕。 附帶說明，在頁面上包含多個具有相同id元素不是一個好習慣。

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

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

Answer 4

使用this.value哪里this是當前上下文

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

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