如何：

Question

我想获得我创建的按钮的值：

<div class="form-row">
  <div class="btn-group">
    <div class="col">
      <div class="form-group">
        <input id="MR" type="button" class="btn btn-outline-primary" value="MR" name="MR">
      </div>
    </div>
    <div class="col">
      <div class="form-group">
        <input id="CT" type="button" class="btn btn-outline-primary" value="CT" name="CT">
      </div>
    </div>
    <div class="col">
      <div class="form-group">
        <input id="PT" type="button" class="btn btn-outline-primary" value="PT" name="PT">
      </div>
    </div>
    <div class="col">
      <div class="form-group">
        <input id="US" type="button" class="btn btn-outline-primary" value="US" name="US">
      </div>
    </div>
  </div>
</div>

如果按下，我会使用此JS突出显示按钮：

$(document).ready(function(){
    $(".btn-outline-primary").click(function(){
        $(this).button('toggle');
    });
});

在这些按钮下面有一个提交按钮，我用它来搜索数据库。那么如何获取按钮的值以将其用于搜索（例如“MR”值）？

Answer 1

“value”是按钮元素的属性，因此您可以使用.attr()访问它：

$(document).ready(function() {
  $(".btn-outline-primary").click(function() {
    console.log($(this).attr("value"))
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-row">
  <div class="btn-group">
    <div class="col">
      <div class="form-group">
        <input id="MR" type="button" class="btn btn-outline-primary" value="MR" name="MR">
      </div>
    </div>
    <div class="col">
      <div class="form-group">
        <input id="CT" type="button" class="btn btn-outline-primary" value="CT" name="CT">
      </div>
    </div>
    <div class="col">
      <div class="form-group">
        <input id="PT" type="button" class="btn btn-outline-primary" value="PT" name="PT">
      </div>
    </div>
    <div class="col">
      <div class="form-group">
        <input id="US" type="button" class="btn btn-outline-primary" value="US" name="US">
      </div>
    </div>
  </div>
</div>

Answer 2

你可以试试这个：

$(".btn-outline-primary").click(function(){
        console.log($(this).prop('value'));
    });

Answer 3

要获取点击按钮的值，您可以执行此操作。只需使用按钮的value属性即可获得与相应按钮关联的value。

const buttons = document.querySelectorAll('.btn-outline-primary');

[...buttons].forEach(item => {
  item.addEventListener('click', event => {
    console.log(item.value);
  });
});

<div class="form-row">
  <div class="btn-group">
    <div class="col">
      <div class="form-group">
        <input id="MR" type="button" class="btn btn-outline-primary" value="MR" name="MR">
      </div>
    </div>
    <div class="col">
      <div class="form-group">
        <input id="CT" type="button" class="btn btn-outline-primary" value="CT" name="CT">
      </div>
    </div>
    <div class="col">
      <div class="form-group">
        <input id="PT" type="button" class="btn btn-outline-primary" value="PT" name="PT">
      </div>
    </div>
    <div class="col">
      <div class="form-group">
        <input id="US" type="button" class="btn btn-outline-primary" value="US" name="US">
      </div>
    </div>
  </div>
</div>

如果您想存储该值供以后使用，那么您只需将其分配给某个变量即可。

const buttons = document.querySelectorAll('.btn-outline-primary');
let clickedValue;

[...buttons].forEach(item => {
  item.addEventListener('click', event => {
    clickedValue = item.value;
  });
});

Answer 4

要获取标记的值，您始终可以使用value方法。

如何：

document.getElementsByClassName('btn-outline-primary")[0].value;

这将获得具有类btn-outline-primary

的第一个元素的值

如果您希望获得所有元素的值：

＆＃13;

var arr = document.getElementsByClassName('btn-outline-primary');
var array = []
arr.map(_=>array.push(_.value))

＆＃13;

如果您使用的是JQuery，则需要添加

.attr('value')

获取值

Answer 5

您可以找到所有具有活动类的按钮并获取其值

类似的东西：

var values = [];
$('.btn-outline-primary.active').each(function(key, value){
 values.push($(this).val());
});

values数组将包含活动按钮的所有值

获取input type =“button”的值

5 个答案:

如何：