将多个复选框值传递给 JavaScript 中的函数时出错

Question

P.S- 还有其他类似的问题，但他们的方法显示错误消息

我有一个包含多个复选框值的表单。用户可以选择一个或多个选项。

<input type="radio" id="DecisionA" class="DecisionType" name="DecisionType" value="d1">
<input type="radio" id="DecisionB" class="DecisionType" name="DecisionType" value="d2">


 <input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="1">
<label class="form-check-label" for="flexCheckDefault">Decision 1</label>

 <input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="2">
<label class="form-check-label" for="flexCheckDefault">Decision 2</label>

 <input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="3">
<label class="form-check-label" for="flexCheckDefault">Decision 3</label>

 <input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="4">
<label class="form-check-label" for="flexCheckDefault">Decision 4</label>

 <input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="other">
<label class="form-check-label" for="flexCheckDefault">Other Reasons</label>

<button class="submitDecision">Submit</button>

在 JavaScript 中，我尝试将所有数据发送到另一个函数，如提到的 here。

$('.submitDecision').click(function(){

    var decisionCheckboxes = new Array();

    console.log(decisionCheckboxes);
        
    
         var  data = {};
 data['DecisionType'] =$('input:radio[name=DecisionType]:checked').val();
         
        $("input:checked").each(function() {
 
                 decisionCheckboxes.push($(this).val()); 
          });
          data['decisionComments']=decisionCheckboxes;
          
         
            console.log(data);
           saveDecision(data); -------------> saveDecision is the function
        
       }
  });

在控制台中，我得到了这个，即使 NO OPTION 被选中

DecisionType:"3"
decisionComments: (9) ["1", "2", "3","4" ,"other", "on", "on", "on", "on", "on"]

请告诉我问题

Answer 1

首先，您推送的是所有输入，而不是唯一的复选框。检查下面的代码。

$('.submitDecision').click(function(){
    var decisionCheckboxes = [];
    var  data = {};
    data['DecisionType'] =$('input:radio[name=DecisionType]:checked').val();     
    $("input.form-check-input:checked").each(function() { 
        if( $(this).val() == 'other' ){
           console.log('conditions for other value');
        }
        decisionCheckboxes.push($(this).val()); 
    });
    data['decisionComments']=decisionCheckboxes;     
    console.log(data);       
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" id="DecisionA" class="DecisionType" name="DecisionType" value="d1">
<input type="radio" id="DecisionB" class="DecisionType" name="DecisionType" value="d2">


 <input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="1">
<label class="form-check-label" for="flexCheckDefault">Decision 1</label>

 <input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="2">
<label class="form-check-label" for="flexCheckDefault">Decision 2</label>

 <input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="3">
<label class="form-check-label" for="flexCheckDefault">Decision 3</label>

 <input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="4">
<label class="form-check-label" for="flexCheckDefault">Decision 4</label>

 <input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="other">
<label class="form-check-label" for="flexCheckDefault">Other Reasons</label>

<button class="submitDecision">Submit</button>