如何将值从检查输入传递给ajax调用

Question

我正在寻找我的问题的解决方案。我有一堆复选框，并基于他们被检查我想发送到ajax调用的值。

这里是我的html ...

<div class="control-group "> 
<label for="qualifications" class="control-label required">Qualifications</label> 
<div class="controls"> 
    <table class="table"> 
     <tbody> 
      <tr> 
       <td>Induction</td> 
       <td> 
        <div class="switch" data-on-label="In" data-on="info" data-off-label="Out"> 
         <input id="qual" name="qual[1]" type="checkbox" value="1"> 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td>LearnerZone Academy</td> 
       <td> 
        <div class="switch" data-on-label="In" data-on="info" data-off-label="Out"> 
         <input id="qual" name="qual[7]" type="checkbox" value="7"> 
        </div> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div> 
</div> 

<div class="control-group "> 
<label for="units" class="control-label required">Units</label> 
<div id="unit-holder" class="controls"> 
    <table class="table"> 
     <tbody> 
      <tr> 
       <td>Data Protection (DP1)</td> 
       <td> 
        <div class="switch" data-on-label="In" data-on="info" data-off-label="Out"> 
         <input name="unit[7]" type="checkbox" value="7"> 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td>Equal Opportunities (EQ1)</td> 
       <td> 
        <div class="switch" data-on-label="In" data-on="info" data-off-label="Out"> 
         <input name="unit[3]" type="checkbox" value="3"> 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td>Health &amp; Safety (HS1)</td> 
       <td> 
        <div class="switch" data-on-label="In" data-on="info" data-off-label="Out"> 
         <input name="unit[1]" type="checkbox" value="1"> 
        </div> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

而jQuery的...

// Makes the question count 
$("input[type=checkbox]").on('change', function(){ 

var units = $('#unit[]'); 
var stringy = JSON.stringify(units); 

//EDIT 
//I'm actually looking for both qualifications and units 
var qualifications = $('#qualifications[]'); 
var stringy = JSON.stringify(qualifications); 

$.ajax({ 
    type: "POST", 
    url: "http://vle.dev/ajax/question-count", 
    data: {units: units, qualifications: qualifications}, 
    dataType: "text" 
}).done(function(data) { 
    $('.qCount').html(data); 
}); 
}); 

有人能帮助我吗？

Answer 1

首先，您需要获取元素。我觉得你的情况这将是最好看的所有元素与name与“单位”开头：

var elements = $("[name^='unit']"); 

然后，您可以循环那些和检查者添加到一个数组：

var units = []; 
for(var i = 0; i < elements.length; i++){ 
    var element = $(elements[i]); 
    if(element.is(":checked")){ 
     units.push(element.val()); 
    } 
} 

然后，您可以将该数组传递给您的ajax数据属性。

例如，如果您选中了前两个箱子离开了第三勾选，那么该units阵列将[7, 3]

Here is a working example

Answer 2

$("input[type=checkbox]").on('change', function(){  
    var IsChecked = $(this).is(':checked'); 


    if(IsChecked == true) 
    { 
     var Unit = $(this).val(); 
      $.ajax({ 
      type: "POST", 
       url: "http://vle.dev/ajax/question-count", 
       data: {units: Unit }, 
      dataType: "text" 
       }).done(function(data) { 
      $('.qCount').html(data); 
      }); 
    } 
}); 

Answer 3

$("input[type=checkbox]").on('change', function(){ 

var units = new Array(); 
$('#unit-holder :checked').each(function(){ 
     units.push($(this).val()); 
}) 
var stringy = JSON.stringify(units); 

$.ajax({ 
    type: "POST", 
    url: "http://vle.dev/ajax/question-count", 
    data: {units: stringy}, 
    dataType: "text" 
}).done(function(data) { 
    $('.qCount').html(data); 
}); 
}); 

Answer 4

如果你只想要发送的值你可以这样做的单位：

$("input[type=checkbox]").on('change', function(){ 
    $.ajax({ 
    type: "POST", 
    url: "http://vle.dev/ajax/question-count", 
    data: $("[name^='unit']:checked").serialize(), 

如果请求必须是JSON你可以这样做以下：

var units = {}; 
$("[name^='unit']:checked").each(function() { 
    units[this.name] = this.value; 
} 
... 
data: JSON.stringify(units); 

我们不知道你要还的确切格式。所以你可能需要调整代码。

Answer 5

您可以试试这种方法。

1. 对每个复选框点击调用onclick这将存储id或名称任何按照您的要求在数组中。然后进行一次ajax调用并将整个数组传递给服务器端脚本。

2. 或者您可以为每个复选框单击ajax调用。但是我不认为这将是一个适当的方法，如果我们有大量的复选框。

如果在这个方法有问题，那么请确认我。