jquery - 如何将检查输入中的值传递给 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

你可以试试这个方法。

1. 在每个复选框上单击调用一个 onclick，它将根据您的要求在数组中存储 id 或命名任何内容。然后进行一次 ajax 调用并将整个数组传递给服务器端脚本。

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

如果这种方法有问题，请承认我。

Answer 2

首先，您需要获取元素。我认为在您的情况下，最好查找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]

这是一个工作示例

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

$("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);
             });
    }
});