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 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 3

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

$("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 4

您可以尝试使用此方法。

在每个复选框上单击调用onclick，它将根据您在数组中的要求存储id或名称。然后进行一次ajax调用并将整个数组传递给服务器端脚本。
或者您可以为每个复选框点击进行ajax调用。但是如果我们获得大量复选框，我认为这不是一个合适的方法。

如果此方法出现问题，请确认我。

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);
             });
    }
});

如何将值从已检查的输入传递到ajax调用

5 个答案: