如何將值從檢查輸入傳遞給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調用。但是我不認爲這將是一個適當的方法，如果我們有大量的複選框。

如果在這個方法有問題，那麼請確認我。