Question

我正在使用引导程序使用两个引导程序按钮组。我正在尝试使用jquery从这些按钮组中分别获取值。我尝试了几件事，但似乎没有任何效果。

div class="btn-group" id="blood_button">
            <button type="button" value="ABO" name="blood" class="btn btn-secondary btn-sm active" >All</button>
            <button type="button" value="A" name="blood" class="btn btn-secondary btn-sm" >A</button>
            <button type="button" value="B" name="blood" class="btn btn-secondary btn-sm">B</button>
            <button type="button" value="O" name="blood" class="btn btn-secondary btn-sm" >O</button>
            <button type="button" value="AB" name="blood" class="btn btn-secondary btn-sm">AB</button>
            <button type="button" value="U" name="blood" class="btn btn-secondary btn-sm" >None</button>
        </div>
        <br style="clear:both">
        <div class="btn-group" id="bmi_button">
            <button type="button" value="0" name="bmi" class="btn btn-secondary btn-sm active" >All</button>
            <button type="button" value="1" name="bmi" class="btn btn-secondary btn-sm">18.5</button>
            <button type="button" value="2" name="bmi" class="btn btn-secondary btn-sm" >18.5-25</button>
            <button type="button" value="3" name="bmi" class="btn btn-secondary btn-sm">25-30</button>
            <button type="button" value="4" name="bmi" class="btn btn-secondary btn-sm">30-35</button>
            <button type="button" value="5" name="bmi" class="btn btn-secondary btn-sm">35-50</button>
            <button type="button" value="6" name="bmi" class="btn btn-secondary btn-sm">50+</button>
            <button type="button" value="NR" name="bmi" class="btn btn-secondary btn-sm">None</button>
        </div>

我尝试过---

$("#bmi_button").on('click',function(){
    console.log($('#bmi_button > button').val());
})

Answer 1

您需要找到所有按钮并在它们之间循环以获取它们的值。查看下面的示例代码，您可能会有所了解。

$('#bmi_button').click(function(){
    var allBtns = $('#bmi_group').find('button');
    allBtns.each(function(index, btn){
        console.log('Bmi: ', $(btn).val());
    })
})
$('#blood_group_button').click(function(){
    var allBtns = $('#blood_group').find('button');
    allBtns.each(function(index, btn){
        console.log('Blood Group: ', $(btn).val());
    })
})

var bmi_selected = 0,
    blood_group = '';
$('#bmi_group').click(function(e){
  bmi_selected = e.target.value;
  console.log(e.target.value);
})

$('#blood_group').click(function(e){
  bmi_selected = e.target.value;
  console.log(e.target.value);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group" id="blood_group">
    <button type="button" value="ABO" name="blood" class="btn btn-secondary btn-sm active" >All</button>
    <button type="button" value="A" name="blood" class="btn btn-secondary btn-sm" >A</button>
    <button type="button" value="B" name="blood" class="btn btn-secondary btn-sm">B</button>
    <button type="button" value="O" name="blood" class="btn btn-secondary btn-sm" >O</button>
    <button type="button" value="AB" name="blood" class="btn btn-secondary btn-sm">AB</button>
    <button type="button" value="U" name="blood" class="btn btn-secondary btn-sm" >None</button>
</div>
<br style="clear:both">
<div class="btn-group" id="bmi_group">
    <button type="button" value="0" name="bmi" class="btn btn-secondary btn-sm active" >All</button>
    <button type="button" value="1" name="bmi" class="btn btn-secondary btn-sm">18.5</button>
    <button type="button" value="2" name="bmi" class="btn btn-secondary btn-sm" >18.5-25</button>
    <button type="button" value="3" name="bmi" class="btn btn-secondary btn-sm">25-30</button>
    <button type="button" value="4" name="bmi" class="btn btn-secondary btn-sm">30-35</button>
    <button type="button" value="5" name="bmi" class="btn btn-secondary btn-sm">35-50</button>
    <button type="button" value="6" name="bmi" class="btn btn-secondary btn-sm">50+</button>
    <button type="button" value="NR" name="bmi" class="btn btn-secondary btn-sm">None</button>
</div>
        
<button id="bmi_button">get bmi</button>
<button id="blood_group_button"> get bloog groups</button>

Answer 2

您几乎拥有了它，只需要指定按钮上的单击，而不是容器上的

$(function() {
  $("#blood_button > button").on("click", function() {
    alert(this.value);
  });

  $("#bmi_button > button").on("click", function() {
    alert(this.value);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group" id="blood_button">
  <button type="button" value="ABO" name="blood" class="btn btn-secondary btn-sm active">All</button>
  <button type="button" value="A" name="blood" class="btn btn-secondary btn-sm">A</button>
  <button type="button" value="B" name="blood" class="btn btn-secondary btn-sm">B</button>
  <button type="button" value="O" name="blood" class="btn btn-secondary btn-sm">O</button>
  <button type="button" value="AB" name="blood" class="btn btn-secondary btn-sm">AB</button>
  <button type="button" value="U" name="blood" class="btn btn-secondary btn-sm">None</button>
</div>
<br style="clear:both">
<div class="btn-group" id="bmi_button">
  <button type="button" value="0" name="bmi" class="btn btn-secondary btn-sm active">All</button>
  <button type="button" value="1" name="bmi" class="btn btn-secondary btn-sm">18.5</button>
  <button type="button" value="2" name="bmi" class="btn btn-secondary btn-sm">18.5-25</button>
  <button type="button" value="3" name="bmi" class="btn btn-secondary btn-sm">25-30</button>
  <button type="button" value="4" name="bmi" class="btn btn-secondary btn-sm">30-35</button>
  <button type="button" value="5" name="bmi" class="btn btn-secondary btn-sm">35-50</button>
  <button type="button" value="6" name="bmi" class="btn btn-secondary btn-sm">50+</button>
  <button type="button" value="NR" name="bmi" class="btn btn-secondary btn-sm">None</button>
</div>

Answer 3

@Kuhu Gupta我不知道您是否为JQuery部分输入了错误的代码，但是请尝试以下操作：

   $(document).ready(function(){
       $("#bmi_button").click(function(){
           alert("BMI_Button was clicked");
        });

       $("#blood_button").click(function(){
            alert("Blood Button was clicked");
       });        
   });

在每个事件之后您都缺少分号，并且通过使用ready事件还可以帮助您知道页面何时准备就绪。希望这可以帮助。谢谢

从2个引导按钮组中获取价值

3 个答案: