Question

我有一个包含两个文本输入字段和一系列复选框的表单。

有一个变量 fields ，它存储一些数组，其中包含与所选字段有关的数据。我已经将值硬编码到脚本中没有问题，但我似乎无法找到如何正确编写if语句来检查复选框的状态并仅使用这些值，而不是硬编码所选字段。

var start, end, fields;

$(function() {
  $("#form1").submit(function(event) {
    var endD = $("#endDate").val();
    end = endD;
    var startD = $("#startDate").val();
    start = startD;

    //fields = ['PM1','PM2.5','PM10'];


    //if $("#PM1").is("checked"))){
    //fields = ["PM1"];
    //}


    if ($("PM1").attr("checked")) {
      fields = ["PM1"];
    }


    event.preventDefault();

    build_graph();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1">
  Start Datetime:<br>
  <input type="text" name="startDate" id="startDate" class="Date" placeholder="YYYYMMDD-HHMM"><br> End Datetime <br>
  <input type="text" name="startDate" id="endDate" class="Date" placeholder="YYYYMMDD-HHMM"><br> Parameter
  <br>
  <input type="checkbox" class="parameter" id="PM1">PM1<br>
  <input type="checkbox" class="parameter" id="PM2.5" checked>PM2.5<br>
  <input type="checkbox" class="parameter" id="PM10">PM10<br>
  <input type="checkbox" class="parameter" id="Temp">Temperature<br>
  <input type="checkbox" class="parameter" id="Humidity">Humidity<br>
  <input type="checkbox" class="parameter" id="Pressure">Pressure<br>
  <input type="checkbox" class="parameter" id="WindSpeed">Wind Speed<br>
  <input type="checkbox" class="parameter" id="Direction">Direction<br>
  <input type="checkbox" class="parameter" id="RainVolume">Rain Volume<br>
  <input type="submit">
</form>

Answer 1

您可以使用JQuery选择器仅选中已选中的复选框：
$('.myCheckboxs:checked')

这只会给你一个选中的。

Answer 2

使用jQuery，您可以正确检查是否选中了复选框：

if($('#mycheckbox').prop("checked")){
  // it´s checked
}

我的提示，使用此功能将表单序列化为对象

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

然后您可以像这样序列化您的表单：

fields = $("#form1").serializeObject()

所有选中的输入值和复选框都将作为属性

出现

if语句使用jquery选择器和复选框

2 个答案: