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

Posted 2023-05-09

【中文标题】if 语句使用 jquery 选择器和复选框

【英文标题】：if statement using jquery selectors and checkboxes

【发布时间】：2017-12-02 05:21:53

【问题描述】：

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

有一个变量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>

【问题讨论】：

我们中的很多人都是开发人员，而不是文学大师，因此请尽量减少评论，您可能会得到更好的回应。 - 告诉我们您的工作环境如何增加这种情况？ TLDR;

未注释的条件语句是选择器中缺少#

@SethMcClaine 指出并将在未来这样做。

【参考方案1】：

您只能选择选中的复选框，使用 JQuery 选择器：$('.myCheckboxs:checked') 这只会给你选中的那个。

【讨论】：

这会选择所有像你说的那样被选中的“mycheckboxs”类的元素？我将尝试解决这个问题几分钟，当我有一些像样的东西时我会回来。谢谢

这将返回带有已选中的类 myCheckboxs 的每个复选框，如果您不想使用某个类，您可以随时使用 $('.theClassOfMyForm input[type="checkbox"]:checked)

因此立即想到了两种解决方法。一个以某种方式将每个选定的元素 id 作为数组直接传递到字段变量中。二是创建一个 if 语句，其中包含将循环遍历每个内容的内容，并检查它是否是通过以更笨重的方式修改该选择器来检查的。

在这里我做了一个小提琴，所以你可以理解我的解决方案jsfiddle.net/dyomLqzz/5

非常感谢您，这让我们现在更有意义了。

【参考方案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()

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

【讨论】：

这可能正是我需要做的，但就执行而言，这超出了我的理解水平。在我阅读并了解这里的所有内容后，我会尝试回复您，看看我是否可以正确实施它。

可以将表单序列化为 JSON，api.jquery.com/serialize

否，默认情况下它会创建一个 URI-query-String 而不是一个对象

@hotmaildotcom1 不客气，它是 jquery 的一个小扩展，因此您可以在 jQuery 对象上调用 .serializeObject()，它基本上会将您的所有表单输入及其值转换为 javascript 对象，输入的名称属性是键，值是值；）（理想的发送到后端并避免像您一样重复代码）