如何获取单个元素中两个div的单选按钮值

Question

嗨朋友们，我是开发新手，这里我有两个

div

部分

• 主菜
• 主汁

现在我想选择

Jeera Rice

和

Vegetable Kurma

但我的代码无法选择。我只能选择一个。

请任何人解决我的问题并将您的答案发布在代码片段中。

请任何人帮助我

<div class="row">
   <div class="col-sm-6" style="background-color:lightcyan;">
      <!-- Main Title like Min course,Gravy -->
      <h4 class="p-3 m-0 bg-light w-100" style="color:red">Main Course </h4>
      <input type="hidden" class="form-control buffetCategory" value="Main Course"> <!-- needs to take value from here-->
      <div class="col-md-12 px-0 border-top">
         <div class="d-flex gap-2 p-3 border-bottom gold-members">
            <input type="radio" name="buffetSelection" class="form-check-input buffetSelection" value="1">
            <div>
               <h5 class="mb-1">Biryani Rice</h5>
            </div>
         </div>
      </div>
      
      <div class="col-md-12 px-0 border-top">  
         <div class="d-flex gap-2 p-3 border-bottom gold-members">
            <input type="radio" name="buffetSelection" class="form-check-input buffetSelection" value="2">
            <div>
               <h5 class="mb-1">Jeera Rice</h5>
            </div>
         </div>
      </div>
   </div>

   <div class="col-sm-6" style="background-color:lightcyan;">
      <!-- Main Title like Min course,Gravy -->
      <h4 class="p-3 m-0 bg-light w-100" style="color:red">Main Gravy </h4>
      <input type="hidden" class="form-control buffetCategory" value="Main Gravy"> <!-- needs to take value from here-->
      <div class="col-md-12 px-0 border-top">
         <div class="d-flex gap-2 p-3 border-bottom gold-members">
            <input type="radio" name="buffetSelection" class="form-check-input buffetSelection" value="6">
            <div>
               <h5 class="mb-1">Vegetable Dalcha</h5>
            </div>
         </div>
      </div>

      <div class="col-md-12 px-0 border-top">
         <div class="d-flex gap-2 p-3 border-bottom gold-members">
            <input type="radio" name="buffetSelection" class="form-check-input buffetSelection" value="7">
            <div>
               <h5 class="mb-1">Vegetable Kurma</h5>
            </div>
         </div>
      </div>
      <div class="col-md-12 px-0 border-top">
         <div class="d-flex gap-2 p-3 border-bottom gold-members">
            <input type="radio" name="buffetSelection" class="form-check-input buffetSelection" value="8">
            <div>
               <h5 class="mb-1">Vegetable Dalcha</h5>
            </div>
         </div>
      </div>

   </div>
</div>

<button type="button" class="btn btn-theme text-white fw-bold w-100" onclick="get_buffetDetails()">PROCEED</button>

<script>
        function get_buffetDetails() {
        var selectedbuffet = $('input[name=buffetSelection].buffetSelection:checked').val();
    
        console.log(selectedbuffet);
    }
    
    // Output: [ [ 'Main course', 2 ], [ 'Main Gravy', 7 ]

</script>

Anyone feel this is dublicate please share the link so that i can refer from there, anyone pls help out on this.

Answer 1

具有相同

name

值的单选按钮仅允许一项选择。这是设计使然。如果您想要不同组的单选按钮，请为每个组指定不同的

name

。例如：

<div class="row">
   <div class="col-sm-6" style="background-color:lightcyan;">
      <!-- Main Title like Min course,Gravy -->
      <h4 class="p-3 m-0 bg-light w-100" style="color:red">Main Course </h4>
      <input type="hidden" class="form-control buffetCategory" value="Main Course"> <!-- needs to take value from here-->
      <div class="col-md-12 px-0 border-top">
         <div class="d-flex gap-2 p-3 border-bottom gold-members">
            <input type="radio" name="mainCourseSelection" class="form-check-input buffetSelection" value="1">
            <div>
               <h5 class="mb-1">Biryani Rice</h5>
            </div>
         </div>
      </div>
      <div class="col-md-12 px-0 border-top">  
         <div class="d-flex gap-2 p-3 border-bottom gold-members">
            <input type="radio" name="mainCourseSelection" class="form-check-input buffetSelection" value="2">
            <div>
               <h5 class="mb-1">Jeera Rice</h5>
            </div>
         </div>
      </div>
   </div>
   <div class="col-sm-6" style="background-color:lightcyan;">
      <!-- Main Title like Min course,Gravy -->
      <h4 class="p-3 m-0 bg-light w-100" style="color:red">Main Gravy </h4>
      <input type="hidden" class="form-control buffetCategory" value="Main Gravy"> <!-- needs to take value from here-->
      <div class="col-md-12 px-0 border-top">
         <div class="d-flex gap-2 p-3 border-bottom gold-members">
            <input type="radio" name="mainGravySelection" class="form-check-input buffetSelection" value="6">
            <div>
               <h5 class="mb-1">Vegetable Dalcha</h5>
            </div>
         </div>
      </div>
      <div class="col-md-12 px-0 border-top">
         <div class="d-flex gap-2 p-3 border-bottom gold-members">
            <input type="radio" name="mainGravySelection" class="form-check-input buffetSelection" value="7">
            <div>
               <h5 class="mb-1">Vegetable Kurma</h5>
            </div>
         </div>
      </div>
      <div class="col-md-12 px-0 border-top">
         <div class="d-flex gap-2 p-3 border-bottom gold-members">
            <input type="radio" name="mainGravySelection" class="form-check-input buffetSelection" value="8">
            <div>
               <h5 class="mb-1">Vegetable Dalcha</h5>
            </div>
         </div>
      </div>
   </div>
</div>

请注意，第一个“组”现在使用

name="mainCourseSelection"

，第二个“组”现在使用

name="mainGravySelection"

，因此它们是不同的单选按钮组。

您用于 JavaScript 或 CSS 的任何选择器都需要相应更改，并且任何逻辑处理此表单的结果都需要相应更改。