Question

我正在为按钮使用Bootstrap的按钮插件，目前我有6个Checkbox按钮，我需要一个Method来检索每个选中按钮的值以进行一些计算。但是我不知道怎么做，我尝试在这里搜索，找到了一个不错的方法，但对于单选按钮和单个复选框，却找不到多个。

我如何制作一个用于扫除btnGroup元素并检索数组中所有检查值的Jquery方法？

请帮助！

PS。我不是英语为母语的人，而且对Jquery还是很陌生，所以很抱歉，如果这是一个菜鸟问题。

HTML示例：

<div class="btn-toolbar btn-group-toggle" data-toggle="buttons id="btnGroup">
     <div class="col-auto">
        <label class="btn btn-outline-info">
        <input type="checkbox" name="btn1" id="" autocomplete="off" value="value1">value1</label>
    </div>
     <div class="col-auto">
        <label class="btn btn-outline-info">
        <input type="checkbox" name="btn2" id="" autocomplete="off" value="value2">value2</label>
    </div>
     <div class="col-auto">
        <label class="btn btn-outline-info">
        <input type="checkbox" name="btn3" id="" autocomplete="off" value="value3">value3</label>
    </div>
</div>

Answer 1

您可以使用此选择器：

$("#btnGroup input[type='checkbox']:checked")

要获取ID为btnGroup的div中所有选中的复选框。然后，您可以使用.each()遍历所有复选框，并使用destructuring assignment获取每个复选框的值。

在这里，我以示例的方式注销了每个值。请参见下面的示例：

let values = [];
$('.calculate').click(_ => {
  values = [];
  $("#btnGroup input[type='checkbox']:checked").each((_, {value}) => {
    values.push(value);
  });
  
  console.log(values);
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-toolbar btn-group-toggle" data-toggle="buttons" id="btnGroup">
  <div class="col-auto">
    <label class="btn btn-outline-info">
        <input type="checkbox" name="btn1" id="" autocomplete="off" value="value1">value1</label>
  </div>
  <div class="col-auto">
    <label class="btn btn-outline-info">
        <input type="checkbox" name="btn2" id="" autocomplete="off" value="value2">value2</label>
  </div>
  <div class="col-auto">
    <label class="btn btn-outline-info">
        <input type="checkbox" name="btn3" id="" autocomplete="off" value="value3">value3</label>
  </div>
</div>

<button class="calculate btn btn-primary btn-lg">Calculate</button>

如何从Bootstrap 4的复选框按钮中检索值？

1 个答案: