получить значение из 2 групп кнопок начальной загрузки

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

@ Куху Гупта Я не знаю, неправильно ли вы ввели код для части JQuery, но, пожалуйста, попробуйте следующее:

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

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

Вы пропускаете точки с запятой после каждого события, и это также помогаетзнать, когда страница готова, используя событие ready.Надеюсь это поможет.Спасибо